knockoutjs模式的例子多

我正在构建一个包含两个复杂的，显着不同（但有一些共享组件）视图的应用程序。 一个视图允许用户运行查询并查看搜索结果，另一个视图提供最近活动的概述。 一个相关的例子可能是一个具有电子邮件屏幕和联系人屏幕的PIM应用程序。 这两套行动是完全不同的，但在那之间也有结构上的相似之处。 在构建我的应用程序时，我已经开始使用搜索结果视图。 我现在需要创建第二个，并且想知道组织代码的最佳实践。

我是否为每个应用程序“视图”创建一个单独的对象（我猜是子视图模型），并用if / ifnot绑定在它们之间切换？ 视图之间的一个共同点是每个视图都有一个可滚动，可过滤，可分页的对象列表。 我是否应该尝试将列表之间的差异分解出来，以便我可以有一个通用的排序/筛选器UI，还是只创建两个仅共享我的自定义绑定的并行接口？

谢谢，

基因

---

有几个方向，你可以去这个。

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

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/

链接地址: http://www.djcxy.com/p/66053.html

上一篇: Example of knockoutjs pattern for multi

下一篇: Replace multiple tags in a row in select statement from another table