Html 你可以调用 ko.applyBindings 来绑定局部视图吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7342814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you call ko.applyBindings to bind a partial view?
提问by Charlie
I'm using KnockoutJS and have a main view and view model. I want a dialog (the jQuery UI one) to popup with another view which a separate child view model to be bound to.
我正在使用 KnockoutJS 并有一个主视图和视图模型。我想要一个对话框（jQuery UI 的）弹出另一个视图，一个单独的子视图模型要绑定到这个视图。
The HTML for the dialog content is retrieved using AJAX so I want to be able to call ko.applyBindingsonce the request has completed, and I want to bind the child view model to just the portion of the HTML loaded via ajax inside the dialog div.
对话框内容的 HTML 是使用 AJAX 检索的，因此我希望能够ko.applyBindings在请求完成后调用，并且我想将子视图模型绑定到通过对话框 div 内的 ajax 加载的 HTML 部分。
Is this actually possible or do I need to load ALL my views and view models when the page initially loads and then call ko.applyBindingsonce?
这真的可能吗，还是我需要在页面最初加载时加载所有视图和视图模型，然后调用ko.applyBindings一次？
回答by RP Niemeyer
ko.applyBindingsaccepts a second parameter that is a DOM element to use as the root.
ko.applyBindings接受作为根的 DOM 元素的第二个参数。
This would let you do something like:
这将让您执行以下操作：
<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>
So, you can use this technique to bind a viewModel to the dynamic content that you load into your dialog. Overall, you just want to be careful not to call applyBindingsmultiple times on the same elements, as you will get multiple event handlers attached.
因此，您可以使用此技术将 viewModel 绑定到加载到对话框中的动态内容。总的来说，您只是要小心不要applyBindings在同一元素上多次调用，因为您会附加多个事件处理程序。
回答by mhu
While Niemeyer's answer is a more correct answer to the question, you couldalso do the following:
虽然 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>
This means you don't have to specify the DOM element, and you can even bind multiple models to the same element, like this:
这意味着您不必指定 DOM 元素，您甚至可以将多个模型绑定到同一个元素，如下所示：
<div>
<input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
回答by ZiglioUK
I've managed to bind a custom model to an element at runtime. The code is here: http://jsfiddle.net/ZiglioNZ/tzD4T/457/
我设法在运行时将自定义模型绑定到元素。代码在这里：http: //jsfiddle.net/ZiglioNZ/tzD4T/457/
The interesting bit is that I apply the data-bind attribute to an element I didn't define:
有趣的是，我将 data-bind 属性应用于我没有定义的元素：
var handle = slider.slider().find(".ui-slider-handle").first();
$(handle).attr("data-bind", "tooltip: viewModel.value");
ko.applyBindings(viewModel.value, $(handle)[0]);
回答by Sam Jacobs
You should look at the withbinding, as well as controlsDescendantBindingshttp://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html
您应该查看with绑定，以及controlsDescendantBindingshttp://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html
