可以调用 ko.applyBindings 来绑定局部视图吗？

Question

我正在使用 KnockoutJS 并且有一个主视图和视图模型。我想要一个对话框（jQuery UI 对话框）弹出另一个视图，该视图绑定一个单独的子视图模型。

对话框内容的 HTML 是使用 AJAX 检索的，因此我希望能够在请求完成后调用 ko.applyBindings，并且我想将子视图模型绑定到通过 ajax 加载的 HTML 的部分内部对话框 div。

这真的可能吗，还是我需要在页面最初加载时加载我的所有视图和视图模型，然后调用一次ko.applyBindings？

Answer 1

您应该查看with 绑定以及controlsDescendantBindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

Answer 2

虽然 Niemeyer 的答案是对该问题的更正确答案，但您也可以执行以下操作：

<div>
  <input data-bind="value: VMA.name" />
</div>

<div>
  <input data-bind="value: VMB.name" />
</div>

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}
  };

  ko.applyBindings(viewModels);
</script>

这意味着您不必指定 DOM 元素，甚至可以将多个模型绑定到同一个元素，如下所示：

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>

Answer 3

我已经设法在运行时将自定义模型绑定到元素。代码在这里：http://jsfiddle.net/ZiglioNZ/tzD4T/457/

有趣的是，我将 data-bind 属性应用于我没有定义的元素：

    var handle = slider.slider().find(".ui-slider-handle").first();
    $(handle).attr("data-bind", "tooltip: viewModel.value");
    ko.applyBindings(viewModel.value, $(handle)[0]);

Answer 4

ko.applyBindings 接受第二个参数，该参数是用作根的 DOM 元素。

这会让你做类似的事情：

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Bob")
  };

  var viewModelB = {
     name: ko.observable("Ted")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

因此，您可以使用此技术将 viewModel 绑定到加载到对话框中的动态内容。总的来说，您只需要注意不要在同一个元素上多次调用 applyBindings，因为您会附加多个事件处理程序。