主视图模型中的绑定答案

【问题标题】：Binding in Master View Model主视图模型中的绑定
【发布时间】：2013-05-24 22:19:46
【问题描述】：

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

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

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

现在我将它绑定如下： ko.applyBindings(ViewModel1, document.getElementById('div1')); ko.applyBindings(ViewModel2 , document.getElementById('div2'));

【问题讨论】：

标签： c# javascript asp.net knockout.js

【解决方案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 的属性。

【讨论】：

【解决方案2】：

另一个答案 (@PatrickD) 是正确的，只是它有语法错误。 MasterViewModel 是一个对象字面量，所以应该这样写：

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

【讨论】：

【解决方案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 绑定来简化您的标记

<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>

【讨论】：