多视图应用的 Knockoutjs 模式示例 [英] Example of knockoutjs pattern for multi-view applications

问题描述

我正在构建一个应用程序，其中包含两个复杂的、显着不同(但有一些共享组件)的视图.一个视图允许用户运行查询并查看搜索结果，另一个视图提供最近活动的概览.一个相关示例可能是具有电子邮件屏幕和联系人屏幕的 PIM 应用程序.两组操作完全不同，但两者之间也存在结构相似之处.在构建我的应用程序时，我从搜索结果视图开始.我现在需要创建第二个，并且想知道组织代码的最佳实践.

I am building an application that contains two complex, significantly different (yet with some shared components) views. One view allows the user to run queries and look at search results, and the other view gives an overview of recent activity. A related example might be a PIM app that has an email screen and a contacts screen. The two sets of operations are quite different, and yet there are also structural similarities between then. In building out my application, I have started with the search results view. I now need to create the second one, and am wondering about best practices in organizing the code.

我是否为每个应用程序视图"创建一个单独的对象(我猜是子视图模型)并使用 if/ifnot 绑定在它们之间切换?视图之间的一个共同点是每个视图都有一个可滚动、可过滤、可分页的对象列表.我应该尝试找出列表之间的差异，以便我可以拥有一个通用的排序/过滤器 UI，还是只创建两个仅共享我的自定义绑定的并行接口?

Do I create a separate object (sub-view model, I guess) for each application "view" and toggle between them with if/ifnot bindings? One commonality between the views is that each has a scrollable, filterable, pageable list of objects. Should I try to factor out the differences between the lists so that I can have a common sort/filter UI, or do I just create two parallel interfaces that only share my custom bindings?

谢谢，

基因

推荐答案

有几个方向，你可以用这个.

There are a few directions that you could go with this one.

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

One option is to call ko.applyBindings with distinct view models against separate DOM elements like:

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

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

http://jsfiddle.net/9abgxn8k/

在这种情况下，您需要确保元素不是彼此的祖先(不想绑定任何东西两次)

In this case, you would want to make sure that the elements are not ancestors of each other (don't want to bind anything twice)

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

Another option is to use sub view models:

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

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

ko.applyBindings(viewModel);

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

In this method, you would then use with bindings on the areas that you want to display with each view model. You can control visibility with flags on the sub models or on the top model.

我喜欢的另一个选择是给你的观点"一些结构，然后做一些类似的事情:

Another option that I like is to give your "views" a little bit of structure and do something like:

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/

这篇关于多视图应用的 Knockoutjs 模式示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！