Question

我已经构建了一个包含多个页面的Web应用程序。其中一些是由淘汰赛驱动的。

我正在尝试应用一些Ajax优化的页面加载并偶然发现以下问题。

说我有以下常规页面结构

<body>
  <div id="content">
  </div>
</body>

以下视图，使用Knockout。我包含对applyBindings内联的调用，以便能够为每个视图加载正确的ViewModel。

<section id="editor">
  <ul data-bind="foreach: items">
   ....
  </form>
</section>

<script>
  ko.applyBindings({items: {}}, $("#editor").el)
</script>

我将视图异步加载到div＃内容中，例如使用JQuery.load（＆＃34; editor.html＃content＆＃34;）

第一页加载工作正常，但是当从此视图导航（再次使用JQuery.load）并再次返回时，我收到错误：

You cannot apply bindings multiple times to the same element.

我已经尝试过应用ko.cleanNode但没有成功。我错过了什么？当显示其他内容时，应从DOM中删除#editor节点。所以我真的不明白如何清理绑定或重新初始化淘汰赛。

注意：我不想要旧数据，我想在新加载的页面上初始化Bindings

Answer 1

您可以在控制台中测试$("#editor").el吗？它在标准jQuery中不起作用。

如果您的$("#editor").el返回未定义，则ko.applyBindings({items: {}}, $("#editor").el)基本上与window.document.body绑定。

您可以尝试

ko.applyBindings({items: {}}, $("#editor").get(0));

...
// call cleanNode before loading new page.
ko.cleanNode($("#editor").get(0));
$("#content").load( "newpage.html" );

Answer 2

如果你在“编辑器”部分的绑定没有改变，我建议你只从服务器加载（AJAX）json数据，并在浏览器中替换（修改）你的viewModel，这样敲门会自动刷新dom

Knockout + Ajax Content导致多个绑定错误

2 个答案: