在一个页面上重用Backbone Marionette模块

时间:2013-09-10 14:22:32

标签: javascript backbone.js marionette

我真的很喜欢Marionette以及它为Backbone添加的结构。但是,我对如何在单个页面上重用模块感到有点困惑。

我有一个Marionette模块,可以渲染和处理类别树的事件。我想在同一页面上重用此模块,该页面将在页面的不同区域显示不同的集合。我开始意识到Marionette Modules基本上是Application对象上的单例,它也是一个单例。我显然无法创建模块的新实例来显示和处理不同区域中新集合的事件。同样,我无法在模块上注册和触发事件,因为只有一个事件,每个区域触发的事件需要彼此独立。

我是否错误地考虑了模块?如何在不同地区/馆藏的同一页面上重复使用?

2 个答案:

答案 0 :(得分:4)

将模块视为命名空间。你永远不会尝试复制命名空间,对吗?但是,让命名空间暴露公共类型是很常见的,代码的其他部分可以创建多个实例。

App.module('CategoryTree', function(self, App, Backbone, Marionette, $, _) {
   self.Collection = Backbone.Collection.extend( ... );
   self.CollectionView = Marionette.CollectionView.extend( ... );
   ...
});

//elsewhere...
var workingCollection = new App.CategoryTree.Collection( ... );
var workingView = new App.CategoryTree.CollectionView( ... );
var previewCollection = new App.CategoryTree.Collection( ... );
var previewView = new App.CategoryTree.CollectionView( ... );

答案 1 :(得分:2)

编辑我想出了我不喜欢的内容......如果你需要一个展示未知数量的类别树(例如,响应一个AJAX调用),你就死了水。


我找到了一个似乎有用的潜在解决方案。基本上,模块定义只是一个功能。在将模块添加到应用程序时,我不是仅使用该函数,而是将函数定义为全局范围内的其他位置,以便我可以实现它。

Project.Modules.CategoryTree = function(self, App, Backbone, Marionette, $, _) {
  // ... module definition goes here ...
}

每当我想使用这个模块时,我基本上将它作为子模块添加到现有的模块或应用程序中。像这样......

App.module("WorkingTree", Project.Modules.CategoryTree)
App.module("PreviewTree", Project.Modules.CategoryTree)

虽然这确实通过创建两个不同的实例来重用模块代码,但它对我来说并不适合。那里有更好的解决方案吗?