Связывание виджетов с Гридстером и Нокаутом

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

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

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

Вот 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>

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

Ответы на вопрос(4)

Ваш ответ на вопрос