【问题标题】:Reuse a Backbone Marionette Module on a single page在单个页面上重用主干木偶模块
【发布时间】:2013-09-10 14:22:32
【问题描述】:

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

我有一个 Marionette 模块,用于呈现和处理类别树的事件。我想在同一页面上重用这个模块,这将在页面的不同区域显示不同的集合。我开始意识到 Marionette 模块本质上是 Application 对象上的单例,它也是一个单例。我显然无法创建 Module 的新实例来显示和处理不同区域中新集合的事件。同样,我无法在 Module 上注册和触发事件,因为只有一个,并且每个区域中触发的事件需要相互独立。

我是否错误地考虑了模块?它们如何在具有不同区域/集合的同一页面上重复使用?

【问题讨论】:

    标签: javascript backbone.js marionette


    【解决方案1】:

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

    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( ... );
    

    【讨论】:

    • 考虑像命名空间这样的模块真的很有帮助,现在你提到它很有意义。模块本身并不是完全可重用的,其强大之处在于它通过其公共接口公开的内容。感谢您的澄清。
    【解决方案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)
    

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

    【讨论】:

    • 谢谢!这真的很聪明。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-11
    • 1970-01-01
    • 1970-01-01
    • 2013-07-15
    • 1970-01-01
    相关资源
    最近更新 更多