多视图应用程序的 knockoutjs 模式示例 [关闭]

Posted 2023-03-27

【中文标题】多视图应用程序的 knockoutjs 模式示例 [关闭]

【英文标题】：Example of knockoutjs pattern for multi-view applications [closed]

【发布时间】：2012-01-30 09:50:47

【问题描述】：

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

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

谢谢，

基因

【问题讨论】：

@andrew-barber - 我相信这个问题表明了最低限度的理解。对问题的 30 多个赞成票和对答案的 50 多个赞成票。对 SO 社区来说显然是一个有用的问题。请重新打开。

【参考方案1】：

你可以按照这个方向走几个方向。

一种选择是调用 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/

【讨论】：

谢谢！这与我想我会做的事情一致。

当我尝试通过将现有标记推送到模板中来重构我的代码时，我收到以下错误：This template engine does not support the 'with' binding within its templates

knockout-2.0.0.debug.js第2555行出现错误

使用 jQuery 模板时不支持控制流绑定。当 Knockout 检测到它被引用时，将启用 jQuery 模板引擎。因此，您可以删除对 j​​Query 模板的引用并使用本机模板引擎，只要您不使用它的任何功能。这种技术当然可以应用于 jQuery 模板，只需要使用 template: name: 'viewTmpl', data: selectedView 类型语法和模板而不是 with（如果需要）。

你有什么数据需要在两个视图模型之间共享？对于共享父视图模型的第二个选项，这似乎微不足道，但是第一个选项呢？这种方法也可以吗？