如何清除/删除Knockout.js中的可观察绑定？

我正在将功能构建到用户可以执行多次的网页上。通过用户的操作，使用ko.applyBindings（）创建对象/模型并将其应用于HTML。

数据绑定的HTML是通过jQuery模板创建的。

到目前为止，一切都很好。

当我通过创建第二个对象/模型并调用ko.applyBindings（）重复此步骤时，遇到两个问题：

1. 标记显示先前的对象/模型以及新的对象/模型。
2. 尽管对象/模型中的属性之一仍在标记中呈现，但仍会发生JavaScript错误。

为了解决这个问题，在第一遍之后，我调用jQuery的.empty（）来删除包含所有数据绑定属性的模板化HTML，以使其不再存在于DOM中。当用户开始第二遍的处理时，将数据绑定的HTML重新添加到DOM。

但是就像我说的那样，当HTML重新添加到DOM并重新绑定到新的对象/模型时，它仍然包含来自第一个对象/模型的数据，并且我仍然遇到未发生的JS错误。在第一遍。

结论似乎是，即使从DOM中删除了标记，淘汰赛仍保留了这些绑定属性。

因此，我正在寻找一种从淘汰赛中删除这些绑定属性的方法。告诉淘汰赛，不再有可观察的模型。有没有办法做到这一点？

编辑

基本过程是用户上传文件；然后服务器使用JSON对象进行响应，将数据绑定的HTML添加到DOM，然后使用以下方法将该JSON对象模型绑定到该HTML

mn.AccountCreationModel = new AccountViewModel(jsonData.Account);
ko.applyBindings(mn.AccountCreationModel);

用户在模型上进行了一些选择后，将同一对象发布回服务器，从DOM中删除了数据绑定的HTML，然后得到了以下JS

mn.AccountCreationModel = null;

当用户希望再次执行此操作时，将重复所有这些步骤。

恐怕代码太“涉及”以至于无法进行jsFiddle演示。

您是否尝试过在DOM元素上调用敲除的clean node方法来处置内存绑定对象？

var element = $('#elementId')[0]; 
ko.cleanNode(element);

然后，使用新的视图模型在该元素上再次应用敲除绑定将更新您的视图绑定。

对于我正在从事的项目，我编写了一个简单的ko.unapplyBindings函数，该函数接受jQuery节点和remove布尔值。它首先取消所有jQuery事件的绑定，因为ko.cleanNode方法无法解决该问题。我已经测试了内存泄漏，它似乎可以正常工作。

ko.unapplyBindings = function ($node, remove) {
    // unbind events
    $node.find("*").each(function () {
        $(this).unbind();
    });

    // Remove KO subscriptions and references
    if (remove) {
        ko.removeNode($node[0]);
    } else {
        ko.cleanNode($node[0]);
    }
};

您可以尝试使用基因剔除提供的with绑定：http : //knockoutjs.com/documentation/with-binding.html 这个想法是使用一次应用绑定，并且只要您的数据更改，就可以更新模型。

假设您有一个顶级视图模型storeViewModel，以cartViewModel表示的购物车，以及该购物车中的物品列表-例如cartItemsViewModel。

您将把顶级模型-storeViewModel绑定到整个页面。然后，您可以将页面中负责购物车或购物车项目的部分分开。

假设cartItemsViewModel具有以下结构：

var actualCartItemsModel = { CartItems: [
  { ItemName: "FirstItem", Price: 12 }, 
  { ItemName: "SecondItem", Price: 10 }
] }

cartItemsViewModel开头可以为空。

步骤如下所示：

1. 在html中定义绑定。分离cartItemsViewModel绑定。

     
       <div data-bind="with: cartItemsViewModel">
         <div data-bind="foreach: CartItems">
           <span data-bind="text: ItemName"></span>
           <span data-bind="text: Price"></span>
         </div>
       </div>
     
   

2. 商店模型来自您的服务器（或以其他任何方式创建）。

   var storeViewModel = ko.mapping.fromJS(modelFromServer)

3. 在顶级视图模型上定义空模型。然后可以使用实际数据更新该模型的结构。

     
       storeViewModel.cartItemsViewModel = ko.observable();
       storeViewModel.cartViewModel = ko.observable();
    
   

4. 绑定顶级视图模型。

   ko.applyBindings(storeViewModel);

5. 当cartItemsViewModel对象可用时，请将其分配给先前定义的占位符。

   storeViewModel.cartItemsViewModel(actualCartItemsModel);

如果您想清除购物车中的物品： storeViewModel.cartItemsViewModel(null);

淘汰赛将处理html-即，当模型不为空时它将出现，并且div的内容（带有“ with binding”的内容）将消失。

每次单击搜索按钮时，我必须调用ko.applyBinding，并且过滤后的数据从服务器返回，在这种情况下，无需我使用ko.cleanNode就可以完成下面的工作。

我经历过，如果我们用模板替换foreach，那么在collections / observableArray的情况下应该可以正常工作。

您可能会发现此方案很有用。

<ul data-bind="template: { name: 'template', foreach: Events }"></ul>

<script id="template" type="text/html">
    <li><span data-bind="text: Name"></span></li>
</script>

与其使用KO的内部功能而不是处理JQuery的毯式事件处理程序，不如使用with或template绑定。当您执行此操作时，ko将重新创建DOM的该部分，因此将自动清除它。这也是推荐的方式，请参见：https：//stackoverflow.com/a/15069509/207661。

我认为最好始终保持绑定状态，并仅更新与其关联的数据。我遇到了这个问题，发现仅使用.resetAll()保存数据的数组上的方法进行调用是最有效的方法。

基本上，您可以从一些全局变量开始，该变量包含要通过ViewModel呈现的数据：

var myLiveData = ko.observableArray();

我花了一段时间才意识到我不能仅仅制作myLiveData一个普通的数组-该ko.oberservableArray部分很重要。

然后，您可以继续做任何您想做的事情myLiveData。例如，$.getJSON拨打电话：

$.getJSON("http://foo.bar/data.json?callback=?", function(data) {
    myLiveData.removeAll();
    /* parse the JSON data however you want, get it into myLiveData, as below */
    myLiveData.push(data[0].foo);
    myLiveData.push(data[4].bar);
});

完成此操作后，您可以照常使用ViewModel继续应用绑定：

function MyViewModel() {
    var self = this;
    self.myData = myLiveData;
};
ko.applyBindings(new MyViewModel());

然后在HTML中myData照常使用即可。

这样，您可以将myLiveData从任何函数中删除。例如，如果您想每隔几秒钟更新一次，只需将该$.getJSON行包装在一个函数中并对其进行调用setInterval。只要您记得保留myLiveData.removeAll();行，就永远不需要删除绑定。

除非您的数据确实很大，否则用户甚至无法注意到在重置阵列与重新添加最新数据之间的时间。

我最近遇到了内存泄漏问题，ko.cleanNode(element);不会为我做- ko.removeNode(element);做到了。Javascript + Knockout.js内存泄漏-如何确保对象被销毁？

您是否考虑过：

try {
    ko.applyBindings(PersonListViewModel);
}
catch (err) {
    console.log(err.message);
}

我想到了这个，因为在淘汰赛中，我找到了这段代码

    var alreadyBound = ko.utils.domData.get(node, boundElementDomDataKey);
    if (!sourceBindings) {
        if (alreadyBound) {
            throw Error("You cannot apply bindings multiple times to the same element.");
        }
        ko.utils.domData.set(node, boundElementDomDataKey, true);
    }

所以对我来说，这并不是一个已经被束缚的问题，没有发现并处理错误。

我发现，如果视图模型包含许多div绑定，则清除的最佳方法ko.applyBindings(new someModelView);是使用：ko.cleanNode($("body")[0]);这使您可以ko.applyBindings(new someModelView2);动态调用新的函数，而不必担心以前的视图模型仍被绑定。