你可以调用ko.applyBindings绑定一个局部视图?

我使用KnockoutJS,并有一个主视图和视图模型。 我想要一个对话框(jQuery UI的一个)popup与另一个视图,一个单独的子视图模型将被绑定到。

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

这实际上是可能的,或者我需要加载所有的视图和查看模型,当页面最初加载,然后调用一次ko.applyBindings

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绑定到您加载到对话框中的dynamic内容。 总体而言,您只需要小心,不要在相同的元素上多次调用applyBindings ,因为您将获得多个附加的事件处理程序。

虽然尼迈耶的回答是对这个问题更正确的回答,但你可以做以下的事情:

 <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> 

我设法在运行时将自定义模型绑定到元素。 代码在这里: 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]); 

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