Question

我正在开发我的第一个使用Marionette.js框架构建的大型前端应用程序。到目前为止我有模块BlogApp，这是一个小博客子应用程序，只有2个方法列表（列出所有帖子）和显示（按ID显示单个帖子）：

@MainApp.module "BlogApplication", (BlogApplication, App, Backbone, Marionette, $, _) ->

    class BlogApplication.Router extends Marionette.AppRouter
        appRoutes:
            "blog"              : "list"
            "posts/:id"         : "showPost"

    API =

        list: ->
            BlogApplication.List.Controller.list()

        showPost: (id, post) ->
            BlogApplication.Show.Controller.showPost id, post

    App.addInitializer ->
        new BlogApplication.Router
            controller: API

    App.vent.on "blog:post:clicked", (post) ->
        App.navigate Routes.post_path(post.id)
        API.showPost post.id, post

    App.on "blog:list": ->
        App.navigate("blog")
        API.list()

我的文件夹的组织方式如下：

--blog
  -blog_app.js
  --list
    --templates
     -blog_sidebar.template
     -blog_panel.template
     -blog_layout.template
     -blog_post.template
    -list_controller.js
    -list_view.js
  --show
    --templates
     -blog_sidebar.template
     -blog_panel.template
     -blog_layout.template
     -blog_post.template
    -show_controller.js
    -show_view.js

一切正常。节目和列表页面之间的唯一区别 - 显示一个完整的帖子，而不是列出所有。现在我有2个控制器，我正在为show和list方法复制我的模板，这完全不是一个好习惯。但我也不认为我应该在show中实现我的List.Controller方法 - 它会帮助我使用相同的模板，因为它会破坏我的应用程序基础架构，并且将来，当我必须添加时一些功能，例如 - 评论，标签等，它会搞砸一切。我该如何以正确的方式组织我的博客模块？

Answer 1

我整理代码的方式一直很好，没有任何内存泄漏（afaik）到现在为止我将与您和任何可能认为有用的人分享这一点我还将提供一些关于如何管理内存的补充信息。

1）对于文件夹结构，我有类似的东西：

文件夹：应用
- 文件夹：app_blog.js
  - 文件夹：布局（用于视图+模板）
  - 文件夹：视图（用于视图+模板）
  - folder：=＆gt;这里有一个或多个子应用程序的名称
    - 文件夹：布局
    - 文件夹：观看次数
    - file：ctr_list.js =＆gt;木偶控制器
  - file：app_blog
文件夹：组件
文件夹：模型
文件夹：供应商
file：main.js
file：app.js

在我的应用程序中，app_blog是一个应用程序（文件夹），它使用app_name.js文件来管理路由，引导子应用程序和控制器来管理应用程序的子部分。

当路线被击中时：

//1. render layout 
var layout = new Layout(); 
layout.render(); 

//2. instantiate controller & tell the controller what to do 
var ctr_List = new Ctr_List(); 
ctr_list.showList();

我的应用程序中的控制器具有以下格式：

define(["backbone", "marionette", "jquery", "zwoop", "apps/app_blog/list/views/some_view"
], 
function(Backbone, Marionette, $, Zwoop, Some_View){ 

    var Ctr_List = Marionette.Controller.extend({ 

        initialize: function(options){ 
            this.events(); 
            this.region = new Marionette.Region({ el: #some-region }); 
            //Define more regions if you need to 
        }, 

        events: function(){ 
            app.on("reset", _.bind(function(){ this.close(); }, this)); 

            app.on("dosomething", _.bind(function(param){ this._doSomething(); }, this)); 
            this.events(); 

            this.region.on("show", _.bind(function(){ this.activatePlugin(); }, this)); 
        }, 

        showList: function(){ 
            this._showList(); 
        }, 

        _showList: function(){ 
            //Render the list 
            var some_view = new Some_View(); 
            this.region.show(some_view); 
        }, 

        _doSomething(param){

        }, 

        _activatePlugin(){
            //eg. $("#date-input").datepicker(); 
        }, 

        //Unbind all events 
        onClose: function(){ 
            app.off("doSomething"); 
            this.region.off("show"); 
        } 

    }); 

    return Ctr_List; 
});

然后当另一个路由被触发并且另一个应用程序启动时，如果需要，我将调用app.trigger("reset")来关闭控制器并解除绑定控制器绑定的事件。

到目前为止，这对我来说效果很好。

如何以正确的方式组织我的Marionette.js-app？

1 个答案: