使用Knockout将不同的模型绑定到页面上的不同部分

Question

我在我的asp.net应用程序中使用knockout javascript库.

对于淘汰赛,我使用ko对象和applyBindings()方法来绑定它.现在我想将两个knockout对象绑定到两个不同的用户界面部分.我如何使用第二个淘汰对象或拥有第二个数据源,以便我可以在第二部分使用它？

Answer 1

您可以轻松地将不同的绑定应用于HTML代码的不同部分.

如果你有这样的结构:

<div id="one"></div>
<div id="two"></div>

做这样的事情:

ko.applyBindings(viewModelOne, document.getElementById('one'));
ko.applyBindings(viewModelTwo, document.getElementById('two'));

如果你有这样的结构:

<div id="one">
    <div id="two"></div>
</div>

您可以使用该controlsDescendantBindings标志告诉knockout单独留下某个子元素.在自定义绑定中使用它,如下所示:

ko.bindingHandlers.stopBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }
};

并像这样使用它:

<div id="one">
    <div data-bind="stopBinding: true">
        <div id="two"></div>
    </div>
</div>

我用stopBinding函数包围了第二个div.这允许您像这样调用相同的applyBindings代码:

ko.applyBindings(viewModelOne, document.getElementById('one'));
ko.applyBindings(viewModelTwo, document.getElementById('two'));