木偶视图,控制器,路由器关系

时间:2014-02-08 23:51:16

标签: backbone.js marionette

我有一个多方面的问题

我有以下设置。

使用:

  • 使用Requirejs
  • 使用Marionette JS
  • 图片是我的想法/意图的粗略描述

我有一个主要的“路由器控制器”来控制我的应用程序。该控制器到达使用代表站点“标签”/区域的控制器。所描述的示例说明了我希望使用用户选项卡的指定控制器。

  • 我是否让用户控制器模型返回一个实例然后定义或在主控制器中实例化?

-

  • 如果我现在转到另一个标签,则实例不会处于活动状态 仍然?我想依靠这个控制器关闭的密切方法 我的观点也是如此......我该怎么做?

Rough description

1 个答案:

答案 0 :(得分:1)

认为你问了两个问题:

  1. “我如何编写我的子控制器以便返回有用的东西?”
  2. “我如何管理子视图?”
  3. 回答#1:

    使用define指令非常容易:

    define(["underscore", "jquery", "backbone", "marionette"],
        function(_, $, Backbone, Marionette) {
    
            var SubController = Marionette.Controller.extend({
                // your code here...
            });
        }
    
        return SubController;
    );
    

    如您所见,我们返回控制器对象引用。这将传递给后续的主控制器:

    define(["underscore", "jquery", "backbone", "marionette", "path/to/SubController"],
        function(_, $, Backbone, Marionette, MyController) {
    
            var MacroController = Marionette.Controller.extend({
    
                initialize: function(options) {
                    this.subController = new SubController();
                }
            });
        }
    
        return MacroController;
    );
    

    回答#2:

    Marionette为您提供了许多管理视图的选项。由于我不知道您的代码是如何构造的,因此很难直接回答这个问题。

    通常, Marionette.Application 会定义一些主要的 Marionette.Regions 来管理应用程序视图。如果你是用户标签结构 整个应用程序,我会说这是管理它的正确位置。如果没有,Marionette会提供 Marionette.Layout 对象。 Marionette.Layout 基本上是:

      

    ... ItemView和Region对象集合的混合体。它们非常适合渲染具有由指定区域管理器管理的多个子区域的应用程序布局。 Source

    Marionette.Region 对象获取视图,并通过一些Marionette结构自动神奇地处理结束事件(无论如何)以及与视图相关的其他清理。

    以下是文档的引用:

      

    Regions提供了一致的方法来管理,显示和关闭应用程序和布局中的视图。他们使用jQuery选择器在正确的位置显示您的视图。

    我正在构建这个我会避免使用主控制器,并且可能会相应地构建它:

    MyApplication
      // TabsController manages the layout below
      TabsController
        // Layout will manage tab clicks and swapping out content
        // in the tabsContentRegion
        TabLayout
          #tabsContentRegion
    

    我总是发现David Sulc's bookthe accompaning repo是Marionette应用程序结构的绝佳参考。

    如果您需要更多帮助,请与我们联系。