knockout.js - 使用 Knockout 将不同的模型绑定(bind)到页面上的不同部分

Question

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

对于 knockout ，我使用 ko 对象和 applyBindings() 方法来绑定(bind)它。现在我想将两个挖空对象绑定(bind)到两个不同的用户界面部分。如何使用第二个 knockout 对象或第二个数据源以便在第二部分中使用它？

Answer 1

您可以轻松地将不同的绑定(bind)应用于 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 单独保留某个子元素。在如下所示的自定义绑定(bind)中使用它:

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'));

引用:http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html