Eu sou novo em Javascript e tentando usar o Gridster com o Knockout. Eu tenho um banco de dados com itens, e eu uso knockout para vinculá-los a um UL. O UL é estilizado com a biblioteca Gridster. Tudo funciona muito bem, a menos que eu tente adicionar elementos adicionais ao UL através do ObservableArray no viewmodel.

Alguém pode me ajudar a entender o escopo e a ordem das operações aqui? Parece que a biblioteca Gridster não está fazendo seu estilo para os novos widgets.

este jsfiddle mostra uma demonstração de trabalho do problema. Observe que quando você clica duas vezes em um widget, ele cria um novo, mas não o coloca na grade. Em vez disso, ele simplesmente fica para trás.

Aqui está o 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>

Aqui é o 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]
});