多视图应用程序的 knockoutjs 模式示例

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果。另请参阅：Stack Overflow 问题清单

已关闭 11 年前。

Answer 1

您可以按照以下几个方向进行操作。

一种选择是针对单独的 DOM 元素使用不同的视图模型调用 ko.applyBindings，例如：

var viewModelA = { name: "Bob" };
var viewModelB = { price: 50 };

ko.applyBindings(viewModelA, document.getElementById("aContainer"));
ko.applyBindings(viewModelB, document.getElementById("bContainer"));

http:// /jsfiddle.net/9abgxn8k/

在这种情况下，您需要确保元素不是彼此的祖先（不想将任何内容绑定两次）

另一种选择是使用子视图模型：

var subModelA = { name: "Bob" };
var subModelB = { price: 50 };

var viewModel = {
  subModelA: { name: "Bob" },
  subModelB: { price: 50 }
};

ko.applyBindings(viewModel);

在此方法中，您可以在要与每个视图模型一起显示的区域上使用 with 绑定。您可以使用子模型或顶部模型上的标志来控制可见性。

我喜欢的另一个选择是为您的“视图”提供一点结构，并执行以下操作：

var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var subModelA = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ])
};

var subModelB = {
    firstName: ko.observable("Bob"),
    lastName: ko.observable("Smith") 
};


var viewModel = {
    views: ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
        ]),
    selectedView: ko.observable()    
};

ko.applyBindings(viewModel);

http:// jsfiddle.net/rniemeyer/PctJz/