我使用KnockoutJS,并有一个主视图和视图模型。我想要一个对话框(jQuery UI之一)弹出另一个单独的子视图模型绑定到的视图。
对话内容的HTML是使用AJAX检索的,所以我希望能够调用ko。applyBindings一旦请求完成,我想将子视图模型绑定到对话框div中通过ajax加载的HTML部分。
这实际上是可能的,或者我需要加载所有的视图和视图模型时,页面最初加载,然后调用ko。applyBindings一次?
我使用KnockoutJS,并有一个主视图和视图模型。我想要一个对话框(jQuery UI之一)弹出另一个单独的子视图模型绑定到的视图。
对话内容的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绑定到你加载到对话框中的动态内容。总的来说,您只需要注意不要在相同的元素上多次调用applyBindings,因为您将获得多个附加事件处理程序。
我已经成功地在运行时将一个自定义模型绑定到一个元素。代码在这里: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]);
虽然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>
您应该查看with绑定,以及controlsdescent bindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html