KnockoutJS - 主视图中的多个局部视图?

时间:2011-06-28 16:09:41

标签: javascript model-view-controller knockout.js

我正在尝试将现有的asp mvc app移植到使用knockoutjs(纯js / html),因为我不再需要asp mvc中的任何功能。但是,我可以预见的一个问题是我处理一些页面的方式。

我有一个页面,其中包含大约12个部分视图,每个部分都有自己的模型。现在使用Knockout JS看起来每页应该只有1个viewmodel / view,但是我所拥有的页面包含大量信息,这些部分类似于:

  • 客户详情
  • 客户地址
  • 客户最近订单
  • 客户卡
  • 客户资金
  • ...

如果部分细节发生变化,使事情变得更加棘手,则需要更改另一部分的数据。所以,让我们说你删除一张卡然后需要告诉资金控制它不再有卡,所以不会有资金。 (这是一个抽象的例子,但希望说明一点)

所以我有点不确定如何在淘汰赛中做到这一点,因为我宁愿将它作为一个大型模型,我会很乐意做,但它包含大量的信息。除了多种表单外,您还可以更新地址,而无需更新其他所有内容。

那么我应该为这个视图制作一个大型模型并处理它吗?或者有没有办法让观点相互交谈?

2 个答案:

答案 0 :(得分:4)

我会警告不要使用一个怪物视图模型,因为它会在复杂的应用程序中创建一个你想要避免的紧耦合。

更好的解决方案是在ko.subscribable之上构建一个pub / sub系统。然后,通过管理对各种事件的订阅来促进视图模型之间的通信。这是一个更多的前期工作,但它会带来红利。

Here是一篇博文,扩展了该主题。我强烈推荐这个博客。它是针对淘汰赛特定挑战和战略的重要资源。

答案 1 :(得分:3)

我的策略是使用一个大视图模型。无论你怎么说,部分视图都是服务器端的概念,一旦所有东西转移到客户端,就会在一个页面中产生大量的数据信息。

然而,为了使事情易于管理,我确保每个Javascript操作代码都写在它自己的部分视图中。这样可以更轻松地跟踪功能及其各自的代码。

所以基本上你在主页面中填充主Customers数组对象,然后调用函数来填充在每个局部视图中分别定义的Details,Addresses等。