Question

我试图理解我在使用KnockoutJS制作的页面中看到的一些有点奇怪的行为。每次清除并重新应用绑定时，可观察数组似乎都会出现重复项。理解问题的最快方法是查看此JSFiddle demo。只需单击任意编辑按钮几次，然后观看此列表即可成长！

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

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。

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

感谢您的帮助

Answer 1

问题在于，在_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组合。你不应该这样做，你只是不需要它，淘汰赛将为你处理所有这些。

Updated fiddle

Knockoutjs ObservableArray的尺寸增加了一倍

1 个答案: