如何清除/删除 Knockout.js 中的可观察绑定? [英] How to clear/remove observable bindings in Knockout.js?

问题描述

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

I'm building functionality onto a webpage which the user can perform multiple times. Through the user's action, an object/model is created and applied to HTML using ko.applyBindings().

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

The data-bound HTML is created through jQuery templates.

到目前为止一切顺利.

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

When I repeat this step by creating a second object/model and call ko.applyBindings() I encounter two problems:

1. 标记显示之前的对象/模型以及新的对象/模型.
2. 发生与对象/模型中的一个属性相关的 javascript 错误，尽管它仍会在标记中呈现.

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

To get around this problem, after the first pass I call jQuery's .empty() to remove the templated HTML which contains all the data-bind attributes, so that it's no longer in the DOM. When the user starts the process for the second pass the data-bound HTML is re-added to the DOM.

但是就像我说的，当 HTML 被重新添加到 DOM 并重新绑定到新的对象/模型时，它仍然包含来自第一个对象/模型的数据，我仍然收到 JS 错误，它没有'不会在第一次通过时发生.

But like I said, when the HTML is re-added to the DOM and re-bound to the new object/model, it still includes data from the the first object/model, and I still get the JS error which doesn't occur during the first pass.

结论似乎是 Knockout 保留了这些绑定属性，即使标记已从 DOM 中删除.

The conclusion appears to be that Knockout is holding on to these bound properties, even though the markup is removed from the DOM.

所以我正在寻找一种从 Knockout 中删除这些绑定属性的方法；告诉淘汰赛不再有可观察的模型.有没有办法做到这一点?

So what I'm looking for is a means of removing these bound properties from Knockout; telling knockout that there is no longer an observable model. Is there a way to do this?

编辑

基本流程是用户上传文件；然后服务器用一个 JSON 对象响应，数据绑定的 HTML 被添加到 DOM，然后使用

The basic process is that the user uploads a file; the server then responds with a JSON object, the data-bound HTML is added to the DOM, then the JSON object model is bound to this HTML using

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

一旦用户对模型进行了一些选择，相同的对象就会被发送回服务器，然后从 DOM 中删除数据绑定的 HTML，然后我就有了以下 JS

Once the user has made some selections on the model, the same object is posted back to the server, the data-bound HTML is removed from then DOM, and I then have the following JS

mn.AccountCreationModel = null;

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

When the user wishes to do this once more, all these steps are repeated.

恐怕代码太复杂"了，无法做一个 jsFiddle 演示.

I'm afraid the code is too 'involved' to do a jsFiddle demo.

推荐答案

您是否尝试过在 DOM 元素上调用knockout 的clean node 方法来处理内存中绑定的对象?

Have you tried calling knockout's clean node method on your DOM element to dispose of the in memory bound objects?

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

然后在具有新视图模型的元素上再次应用敲除绑定将更新您的视图绑定.

Then applying the knockout bindings again on just that element with your new view models would update your view binding.

这篇关于如何清除/删除 Knockout.js 中的可观察绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！