Я новичок в Javascript и пытаюсь использовать Gridster с Knockout. У меня есть база данных с предметами, и я использую knockout foreach, чтобы связать их с UL. UL оформлен с помощью библиотеки Gridster. Все работает отлично, если я не пытаюсь добавить дополнительные элементы в UL через ObservableArray в viewmodel.

Может кто-нибудь помочь мне понять объем и порядок операций здесь? Такое ощущение, что библиотека Гридстера нет делает его стиль для новых виджетов.

это jsfiddle показывает рабочую демонстрацию проблемы. Обратите внимание, когда вы дважды щелкаете виджет, он создает новый, но неПоместите это в сетку. Вместо этого это просто как бы висит позади.

Вот HTML

Вот этот 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]
});