[javascript] Associazione Widget con Gridster e Knockout



Answers

Aggiungi classe = "gs_w" a ur li in gridster dovrebbe funzionare

Question

Sono nuovo di Javascript e sto provando ad usare Gridster con Knockout. Ho un database con gli oggetti, e io uso foreach knockout per legarli a un UL. L'UL è abbinato alla libreria Gridster. Tutto funziona alla grande a meno che non provi ad aggiungere ulteriori elementi all'UL tramite l'ObservableArray nel viewmodel.

Qualcuno può aiutarmi a capire la portata e l'ordine delle operazioni qui? Sembra che la libreria di Gridster non stia facendo il suo stile sui nuovi widget.

Questo jsfiddle mostra una demo funzionante del problema. Nota quando fai doppio clic su un widget, ne crea uno nuovo ma non lo posiziona nella griglia. Invece, è solo una specie di dietro.

Ecco l'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>

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



Dovresti fare qualcosa come sotto. addNewGridElement è chiamato - con l'elemento DOM reso che è importante nel caso di gridster.add_widget quanto gridster.add_widget accetta un elemento DOM come primo argomento - una volta aggiunto qualcosa al Knockout osservabile. Dopo questo, è solo questione di aggiungere domNode a Gridster.

view.html:

   <div class="gridster">
        <ul data-bind="foreach: { myData, afterAdd: $root.addNewGridElement }">
            <li data-bind="attr:{

              'data-row':datarow,
              'data-col':datacol,
              'data-sizex':datasizex,
              'data-sizey':datasizey

        },text:text, doubleClick: $parent.AddOne"></li>
        </ul>
    </div>

view.js:

self.addNewGridElement = function (domNode, index, newTile) {
    // Filter non li items - this will remove comments etc. dom  nodes.
    var liItem = $(domNode).filter('li');
    if ( liItem.length > 0 ) {
        // Add new Widget to Gridster
        self.gridster.add_widget(domNode, newTile.x, newTile.y, newTile.row, newTile.col);
    }
};



Links