javascript - Knockout.js 动态生成的 HTML 未获取更新

Question

我有一个在后台工作的相当复杂的系统，将尝试给出最简短的示例:

我有一个 PHP/HTML 页面，它向服务器发起 Ajax 调用并获取响应 XML。 javascript 基于 XML 动态创建一堆 DOM 元素。 XML 还包含我映射到主页上存在的 knockout View 模型的数据。

但是元素没有得到更新，或者更确切地说，knockout.js 根本没有与它们交互(我认为 ko.applyBinding(model) 是罪魁祸首。

这是我需要的: 1.加载包含knockout.js和 View 模型对象的单个PHP页面。 2. 发送一个 AJAX 请求，该请求返回新数据以使用添加到页面中的新 HTML DOM 元素来更新模型。 3.让knockout.js跟踪这些新元素中的数据信息。

我所看到的问题是 ko.applyBinding(model) 在 HTML 元素出现在 DOM 中之前被触发，因此它们永远不会被绑定(bind)，但是根本没有办法知道将添加哪些元素以及哪些元素数据将从服务器中提取，并且必须保持动态。

我认为如果我可以重新应用绑定(bind)，它就会起作用(我认为)，但尝试这样做会出现错误。我在其他几篇文章中读到，无法为整个文档重新应用绑定(bind)，但必须为每个元素单独完成绑定(bind)，但是这些元素必须是 DOM 中的同级元素，这并不为我工作，因为它们需要嵌套。

关于解决方案有什么想法吗？

编辑:制作了一个 JSFiddle 示例，但是由于我无法将 Knockout-mapping.js 包含在其中，因此它不起作用，因此我准备了 .HTML 文档并添加了所需的库( knockout.js 和 knockout-mapping.js)，将它们全部链接在一起并上传 here它是一个 .rar 文件，包含所有设置和库。

编辑2:下面还可以看到所需内容的简短预览:

var ViewModel = {
  buttonOneText: ko.observable("Button 1")
}

ko.applyBindings(ViewModel);

// IMAGINARY AJAX HAPPENS
// when this happens I need to add another button into the frameDiv and add it's data to the model.

document.getElementById("frameDiv").innerHTML += '<button type="button" data-bind="text: buttonTwoText"></button>'
ViewModel.buttonTwoText = "Button 2";

ko.applyBindings(ViewModel, document.getElementById("frameDiv"));

//				So far this works, and it is great!
//				If you comment out the rest of the JS code it will work perfectly
//				problem comes when you attempt to add a thrid element, because
//				even though "frameDiv" has no bind-data, it doesn't let you run it
//				again on that div.

document.getElementById("frameDiv").innerHTML += '<button type="button" data-bind="text: buttonThreeText"></button>'
ViewModel.buttonThreeText = "Button 3";

ko.applyBindings(ViewModel, document.getElementById("frameDiv"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="frameDiv">
  <button type="button" data-bind="text: buttonOneText"></button>

  <!-- The following element will be added VIA Javascript code -->
  <!--<button type="button" data-bind="text: buttonTwoText"></button>-->
</div>

Answer 1

您可以向 ko.applyBindings 提供第二个参数，用于指定要应用绑定(bind)的顶部节点。您可以在您创建的任何节点上调用此方法，只要您没有将已绑定(bind)的节点放在它们下面即可。

下面是一个小示例脚本，其中包含创建新 DOM 节点、插入它并向其应用绑定(bind)的例程。单击按钮执行例程。

parser = new DOMParser();
foo = 1;

vm = {
  makeNode: function() {
    var el = parser.parseFromString('<div data-bind="text:' + foo + '"></div>', "text/xml").childNodes[0];
    ++foo;
    document.getElementById('foo').appendChild(el);
    ko.applyBindings(vm, el);
  }
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="foo">
</div>
<button data-bind="click: makeNode">Add node</button>