1

我试图理解我在使用 KnockoutJS 制作的页面中看到的一些稍微奇怪的行为。每次我清除并重新应用绑定时，一个可观察的数组似乎都会得到重复的项目。了解问题的最快方法是查看这个JSFiddle 演示。只需多次单击任何编辑按钮，即可观看此列表的增长！

此演示的代码的核心是以下方法：

var _bindItemDetail = function (jsonData) {
        //clear existing bindings
        ko.cleanNode($("#itemdetails").get(0));

        // observables in selected item.
        _viewModel.SelectedItem(ko.mapping.fromJS(jsonData));

        // Apply Bindings
        ko.applyBindings(_viewModel.SelectedItem, $("#itemdetails").get(0));
    };

我想要实现的本质是创建一个列表和详细信息页面。列表 JSON 在初始页面加载时获取，并且在单击编辑链接时获取详细 JSON 并将其绑定到“详细”html。

除了解决问题之外，我还试图了解这种行为，并学习一些关于如何在使用淘汰赛时正确清理陈旧资源的课程。

谢谢你的帮助

4

1 回答 1

2

问题在于，在您的_bindItemDetail函数中，您正在对已复制元素的修改视图重新应用绑定。

var _bindItemDetail = function (jsonData) {
    //clear existing bindings
    ko.cleanNode($("#itemdetails").get(0));

    // observables in selected item.
    _viewModel.SelectedItem(ko.mapping.fromJS(jsonData));

    // Apply Bindings
    ko.applyBindings(_viewModel.SelectedItem, $("#itemdetails").get(0));
};

ko.cleanNode()只是从元素中删除绑定，它不会将视图恢复到其初始状态。通常，您应该只调用ko.applyBindings一组节点一次。不止一次这样做，只是在问问题。

坦率地说，你并没有真正充分利用淘汰赛。您的大部分代码都使用 jquery 来处理所有低级细节。使用淘汰赛的目的是不必担心那些较低级别的细节。

我已经稍微调整了你的小提琴，以更好地利用淘汰赛，而不那么强调使用 jquery。

在视图中：

  • 使用click绑定来处理您的Edit点击事件。
  • 使用with绑定有条件地显示编辑器字段。stopBindings不需要处理程序。

在视图模型中：

  • 将点击处理程序添加editClicked到视图模型。
  • 删除了 jquery 事件绑定。
  • 移除了绑定物品时的ko.cleanNode/组合。ko.applyBindings你不应该这样做，你只是不需要它，淘汰赛会为你处理所有这些。

更新的小提琴

于 2012-11-16T06:15:12.133 回答