Ich bin neu in Javascript und versuche, Gridster mit Knockout zu verwenden. Ich habe eine Datenbank mit Artikeln und binde sie mit Knockout foreach an einen UL. Die UL ist mit der Gridster-Bibliothek gestaltet. Alles funktioniert einwandfrei, es sei denn, ich versuche, dem UL über das ObservableArray im Ansichtsmodell zusätzliche Elemente hinzuzufügen.

Kann mir jemand helfen, den Umfang und die Reihenfolge der Operationen hier zu verstehen? Es scheint, als würde die Gridster-Bibliothek die neuen Widgets nicht anpassen.

Diese jsfiddle zeigt eine funktionierende Demo des Problems. Wenn Sie auf ein Widget doppelklicken, wird ein neues Widget erstellt, das jedoch nicht im Raster platziert wird. Stattdessen hängt es nur ein bisschen dahinter.

Hier ist das HTML

   <div class="gridster">
        <ul data-bind="foreach: myData">
            <li data-bind="attr:{

              'data-row':datarow,
              'data-col':datacol,
              'data-sizex':datasizex,
              'data-sizey':datasizey

        },text:text, doubleClick: $parent.AddOne"></li>
        </ul>
    </div>

Hier ist das Javascript

//This is some widget data to start the process
var gridData = [ {text:'Widget #1', datarow:1, datacol:1, datasizex:1, datasizey:1},
    {text:'Widget #2', datarow:2, datacol:1, datasizex:1, datasizey:1},
    {text:'Widget #3', datarow:1, datacol:2, datasizex:1, datasizey:1},
    {text:'Widget #4', datarow:2, datacol:2, datasizex:1, datasizey:1}];

// The viewmodel contains an observable array of widget data to be 
//    displayed on the gridster
var viewmodel = function () {

    var self = this;
    self.myData = ko.observableArray(gridData);
    //AddOne adds an element to the observable array 
    //   (called at runtime from doubleClick events)
    self.AddOne = function () {
        var self = this;
        myViewModel.myData.push({
            text: 'Widget Added After!',
            datarow: 1,
            datacol: 1,
            datasizex: 1,
            datasizey: 1
        });
    };

};


var myViewModel = new viewmodel();
ko.applyBindings(myViewModel);

$(".gridster ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [140, 140]
});