Soy nuevo en Javascript y estoy tratando de usar Gridster con Knockout. Tengo una base de datos con artículos, y uso knockout foreach para unirlos a un UL. El UL está diseñado con la biblioteca Gridster. Todo funciona muy bien a menos que intente agregar elementos adicionales a la UL a través de ObservableArray en el modelo de visualización.

¿Alguien puede ayudarme a entender el alcance y el orden de las operaciones aquí? Parece que la biblioteca de Gridster no está adaptando su estilo a los nuevos widgets.

Esta jsfiddle muestra una demostración de trabajo del problema. Observe que cuando hace doble clic en un widget, crea uno nuevo, pero no lo coloca en la cuadrícula. En su lugar, simplemente se queda atrás.

Aquí está el 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>

Aquí está el 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]
});