主视图模型中的绑定

本文关键字：绑定 模型 主视图 | 更新日期: 2023-09-27 18:15:07

我在Knockout.js中有两个视图模型，我知道我可以分别绑定它们，但我可以将它们都添加到主视图模型中并绑定一次吗。类似于ko.applyBindingings(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'((；

主视图模型中的绑定

当然。在您的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>

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

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

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

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

您还可以通过使用绑定来简化标记

<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>
相关文章：