与Gridster和Knockout绑定的小部件 [英] Widget binding with Gridster and Knockout

问题描述

我是Javascript的新手，并尝试将Gridster与Knockout一起使用。我有一个包含项目的数据库，我使用knockout foreach将它们绑定到UL。 UL采用Gridster库设计。除非我尝试通过viewmodel中的ObservableArray向UL添加其他元素，否则一切都很有效。

I am new to Javascript and trying to use Gridster with Knockout. I have a database with items, and I use knockout foreach to bind them to a UL. The UL is styled with the Gridster library. Everything works great unless I try to add additional elements to the UL via the ObservableArray in the viewmodel.

有谁能帮我理解这里的操作范围和顺序？感觉就像Gridster库没有为新的小部件做样式。

Can anyone help me understand the scope and order of operations here? It feels like the Gridster library isn't doing its styling to the new widgets.

这个 jsfiddle显示了该问题的工作演示。请注意，当您双击窗口小部件时，它会创建一个新窗口小部件，但不会将其放在网格中。相反，它只是背后隐藏。

This jsfiddle shows a working demo of the issue. Notice when you double click on a widget, it creates a new one but doesn't place it in the grid. Instead, it just kind of hangs out behind.

这是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

Here is the 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]
});

推荐答案

以下是 JSfiddle 。在这里，我只突出了删除功能

Here is a full example in JSfiddle. Here, I have highlighted just the delete function

self.deleteOne = function (item) {
    console.log(item);
    var widget = $("#" + item.id);
    console.log(widget);
    var column = widget.attr("data-col");
    if (column) {
        console.log('Removing ');
        // if this is commented out then the widgets won't re-arrange
        self.gridster.remove_widget(widget, function(){
            self.myData.remove(item);
            console.log('Tiles: '+self.myData().length);                
        });
    }
};

从可观察数组中删除元素的工作是在里面完成的remove_widget回调。请参阅gridster的文档。因此，删除窗口小部件之前执行的removeGridster挂钩不再需要执行实际的remove_widget调用。

The work of removing the element from the observable array is done inside the remove_widget callback. See gridster's documentation. Consequently, the removeGridster hook executed before a widget is removed, does no longer need to do the actual remove_widget call.

这篇关于与Gridster和Knockout绑定的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！