Backbone.js:在视图之间拆分模型

时间:2012-02-09 18:17:00

标签: javascript model-view-controller backbone.js design-patterns

我找到了关于分割和修补Backbone视图的模式的这个很好的资源

http://ricostacruz.com/backbone-patterns/#sub_views

但是,似乎没有任何现有的模式可用于如何以一种容易在多个视图案例中容纳单个模型的方式接近模型添加/视图创建模式。

比方说,我有一个User模型,但我在页面上有两个用户上下文。为了说明的目的,让我们说它们是海报和评论者。海报的视图(渲染和动作)与评论者的观点不同。

Backbone说创建新视图的最佳方法是通过模型的实例化,所以除了在模型上做某种任意的属性设置(例如{poster:true}或{commenter:true})并使用它属性和case / switch指示模型实例化“右”视图,什么是更不可知和“Backboney”处理这个问题的方法?

1 个答案:

答案 0 :(得分:2)

以下是来自here的修改后的示例。

var PhotoRouter = Backbone.Router.extend({
  routes: { "photos/:id": "route" },

  route: function(id) {
    var item = photoCollection.get(id);
    var view = new PhotoView({ model: item });
    var view2 = new PhotoView2({ model: item });

    something.html( view.render().el );
    somethingElse.html( view2.render().el );
  }
}):

现在,Backbone并没有真正的首选方式来构建您的应用。您可以这样做,在路由器中创建和显示视图。或者,有时最好创建自己的AppController对象,这样就可以让路由器只进行路由。或者,您可以创建某种类型的BaseView,这将创建子视图...

但重要的是,你的观点对彼此一无所知。两者都将以自己的方式显示和响应模型中的变化。此外,模型对显示它的视图一无所知。

More info

另一个有用的想法是event aggregator。使用它,您的不同组件可以在不紧密耦合的情况下进行通信。

有一些extensions for Backbone,如(Backbone Marionette),它增加了一些结构。你也可以调查一下。