Question

我在Knockout.js中有两个视图模型，我知道我可以单独绑定它们，但是我可以在主视图模型中添加它们并将其绑定一次。像ko.applyBindingings（MasterViewModel）;任何帮助或建议都是很有用的。非常感谢。

  var ViewModel1 = {
        id: ko.observable(""),
        name: ko.observable("")}

var ViewModel2 = {
        id: ko.observable(""),
        name: ko.observable("")}

现在我把它绑定为folllows： ko.applyBindings（ViewModel1，document.getElementById（'div1'））; ko.applyBindings（ViewModel2，document.getElementById（'div2'））;

Answer 1

当然可以。在您的JavaScript中：

 MasterViewModel = function() {
    this.ViewModel1 = {
      id: ko.observable(""),
      name: ko.observable("")
    }

    this.ViewModel2 = {
      id: ko.observable(""),
      name: ko.observable("")
    }
 }
 ko.applyBindings(new MasterViewModel(), document.getElementById('masterDiv'));

在您的HTML标记中：

 <div id="masterDiv">
    <div id="div1">
        <strong data-bind="text: ViewModel1.name"/>
    </div>
    <div id="div2">
        <strong data-bind="text: ViewModel2.name"/>
    </div>
 </div>

您必须在数据绑定标记中按名称引用您的ViewModel。这允许您确定要绑定到哪个ViewModel属性。

Answer 2

另一个答案（@PatrickD）是正确的，除了它有语法错误。 MasterViewModel是一个对象文字，所以应该这样写：

var MasterViewModel = {
    ViewModel1 : {
      id: ko.observable(""),
      name: ko.observable("")
    },
    ViewModel2 : {
      id: ko.observable(""),
      name: ko.observable("")
    }
 };

Answer 3

var MasterViewModel = {
    var ViewModel1 = {
      id: ko.observable(""),
      name: ko.observable("")
    }

    var ViewModel2 = {
      id: ko.observable(""),
      name: ko.observable("")
    }
 }

 ko.applyBindings(new MasterViewModel(), document.getElementById('masterDiv');

您还可以使用with binding

来简化标记

<div id="masterDiv">
    <div data-bind="with: ViewModel1">
         <strong data-bind="text: name"/>
    </div>

    <div data-bind="with: ViewModel2">
        <strong data-bind="text: name"/>
    </div>
</div>

在主视图模型中绑定

3 个答案: