Javascript 使用Gridster和Knockout的小部件绑定

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

有人能帮我了解这里的业务范围和顺序吗？感觉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>

---

将class=“gs_w”添加到gridster中的ur li中，它应该可以工作

以下是一个我认为更符合MVVM模式的工作解决方案：

我仍然需要考虑remove和move事件（gridster中的移动应该更新viewmodel中项目的x和y值）。我昨天开始使用knockout，所以任何帮助都将不胜感激

我找不到gridster最新版本的cdn。JSFIDLE指向我在Azure中添加的一个临时网站，我会将其保留几天，但可以使用您自己的链接进行更新

/------------------------------更新----------------------------------/

我已经更新了我的代码，以支持删除和移动小部件（），但有一个小警告：存在一个未决问题（），在调用beforeRemove事件之前，knockout会清除jquery数据。这会导致gridster崩溃，因为移动其他项所需的数据保存在数据元素中。一种解决方法是保留数据的副本，然后将其重新添加到元素中，但我选择了惰性方式，并在knockout中注释了有问题的行。

这里是中的完整示例。这里，我只突出显示了delete函数

---

从可观察数组中移除元素的工作在remove_小部件回调中完成。见gridster's。因此，在删除小部件之前执行的removeGridster钩子不再需要执行实际的remove_小部件调用。

您应该执行以下操作

addNewGridElement

被调用-在Gridster的例子中，呈现的DOM元素是非常重要的

Gridster.add_widget

接受一个DOM元素作为它的第一个参数-一旦你将一些东西添加到敲除可观察对象中。在此之后，只需将

domNode

添加到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>

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);
    }
};

---

我用一些额外的代码更新了JSFIDLE，手动将小部件添加到gridster。。。事情就我所知，它是有效的，但我仍然不确定为什么和/或如何。我在这方面又取得了一些进展。看起来Gridster对Knockout添加元素一无所知。我现在唯一的建议是手动添加它们。这是最新的小提琴。谢谢你的帮助，但那不行。您可以在这个JSFIDLE上自己尝试这个建议。。。您的解决方案不完整。如果要将小部件添加到特定的行和列中，会发生什么情况？我认为您没有意识到Gridster不会监视DOM元素的变化。一旦理解了这一点，您就会明白为什么需要调用

add_widget

——您最初是在不通知Gridster的情况下更新DOM元素的。如果我是你的话，我会摆脱KnockoutJS视图（.html），然后继续通过Gridster API方法来完成所有工作。太棒了！这让我省去了很多时间来弄清楚这件事。我唯一的问题是，如果您在$（）内初始化gridster而不是使用afterRender模板，为什么它不起作用？此外，我发现了一个限制：无论您在addOne函数中为添加的小部件的x和y大小指定了什么，它都是1x1。可以通过移动

obj.datacol=parseInt（列）来减轻1x1的限制

和

obj.datarow=parseInt（widget.attr（“数据行”）self.addGridster

函数中的add\u wiget之前，先执行code>rows。在相同的add_小部件调用之前还添加以下行：

obj.datasizex

=parseInt（widget.attr（“data sizex”）；`和

obj.datasizey

=parseInt（widget.attr（“datasizey”）<代码>。您也可以使用widget.data（'col'）`而不是

widget.attr（'data-col'）

等。

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);                
        });
    }
};

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

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);
    }
};