Jestem nowym użytkownikiem Javascript i próbuję używać Gridster z Knockout. Mam bazę danych z przedmiotami i używam foreach nokautu, aby związać ich z UL. UL ma postać biblioteki Gridster. Wszystko działa świetnie, chyba że próbuję dodać dodatkowe elementy do UL za pomocą ObservableArray w widoku viewmodel.

Czy ktoś może mi pomóc zrozumieć zakres i kolejność operacji tutaj? Wydaje się, że biblioteka Gridster nie nadaje się do nowych widgetów.

To jsfiddle pokazuje działające demo tego problemu. Zauważ, że po dwukrotnym kliknięciu widżetu tworzy on nowy, ale nie umieszcza go w siatce. Zamiast tego, to po prostu wisi na włosku.

Oto 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>

Oto 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]
});