如何同步/组织使用requirejs和Backbone.Marionette模块 [英] How to synchronise/organise modules using requirejs and Backbone.Marionette

问题描述

我组织了我的web应用程序的文件结构，这是使用 RequireJs 并的 Backbone.Marionette ，是这样的：

I organised the file structure of my web app, which is using RequireJs and Backbone.Marionette,in this way:

|- main.js
|- app.js
|- /subapp1
    |- subapp1.js
    |- subapp1.router.js
|- /subapp2
    |- subapp2.js
    |- subapp2.router.js
|- /colections
|- /views

要加载我用requireJs的模块。结果
这里是我的code，每个模块我把一些问题。

To loads the modules I use requireJs.
Here's my code, for each module I put some questions.

// main.js
define([
    'app',
    'subapp1/subapp1.router',
    'subapp2/subapp2.router'
], function (app) {
    "use strict";
    app.start();
});

问题：结果
1）是正确的异步加载应用程序和subapps即使subapps需要的应用程序？结果
2）对于subApps是正确加载，需要应用路由器？

Questions:
1) Is right to load asynchronously the app and subapps even if subapps need app?
2) for the subApps is right to load the router which needs the app?

// app.js
/*global define*/
define([
    'backbone',
    'marionette',
    'models/user'
], function (Backbone, Marionette, UserModel) {
    "use strict";

    var App = new Marionette.Application();

    App.addRegions({
        header: '#header',
        sidebar: '#sidebar',
        mainColumn: '#main-column',
        rightColumn: '#right-column'
    });

    App.on("initialize:before", function () {
        this.userModel = new UserModel();
        this.userModel.fetch();
    });

    App.on("initialize:after", function () {
        Backbone.history.start();
    });

    return App;
});

问题：结果
3）由于 subApps 可能需要一些模式我决定将其加载到 app.js 。是不是这样？

Questions:
3) Since the subApps could need some models I decided to load it in app.js. Is it right this way?

// subapp1/subapp1.js
/*global define*/
define([
    'app',
    'subapp1/views/sidebarView',
    'subapp1/views/headerView'
], function (app, SidebarView, HeaderView) {
    "use strict";

    app.addInitializer(function(){
        app.header.show(new HeaderView({userModel: app.userModel}));
        app.sidebar.show(new SidebarView({userModel: app.userModel}));
    });

});

问题：结果
4）关于这个模块，我不知道有关 app.addInitializer 。结果
我不知道，例如，如果在 app.userModel 将当我执行可读取 app.header.show 。
它应该是确定？

Questions:
4) about this module I am not sure about the app.addInitializer.
I am not sure for example if the app.userModel will be fetched when I perform app.header.show. Should it be ok?

// subapp1/subapp1.router.js
/*global define*/
define([
    'marionette',
    'tasks/app'
], function (Marionette, app) {
    "use strict";
    var Router = Marionette.AppRouter.extend({

        appRoutes: {
            'tasks': 'tasks',
            'tasks/:id': 'taskDetail',
            '*defaults': 'tasks'
        }

    });

    return new Router({
        controller: app
    });
});

问：结果
5）它确定从 main.js 的 subapp1 / subapp1.router 而不是<$ C $加载C> subapp1 / subapp1 ？

推荐答案

您应该可以异步加载你的应用和任何子应用程序。如果子应用要求主应用，就应该将其列为依赖。 RequireJS将解决依赖你。

1) Is right to load asynchronously the app and subapps even if subapps need app?

You should be able to asynchronously load your app and any of the sub-apps. If the sub-apps require the main app, they should list it as a dependency. RequireJS will resolve the dependencies for you.

你唯一要注意的是圆形的依赖，但不应该是任何东西无法修复。

Only thing you should watch out for are circular dependencies, but that shouldn't be anything you can't fix.

清单在 main.js 的路由器子应用 code>听起来我的权利。

Listing the routers of your sub-apps in your main.js sounds right to me.

一个模块应该列出任何和它用作其依赖性的其他所有模块。因此，如果 app.js 和 subapp1 / subapp1.js 都需要模式/用户。 JS ，他们应该的两个列表模型/ user.js的作为一个依赖项。

A module should list any and all other modules it uses as its dependencies. Therefore, if app.js and subapp1/subapp1.js both require models/user.js, they should both list models/user.js as one of their dependencies.

这样，如果你改变任何一个模块以这样一种方式，它不再需要模型/ user.js的您可以从该特定模块的依赖性不另一个模块缺少依赖的风险。

This way, if you change any of the modules in such a way that it no longer requires models/user.js you can remove the dependency from that particular module without risk of missing dependencies in another module.

除了是管理您的依赖关系是救的方式，这也是很好的和明确的其他开发商甚至希望自己在未来的code时。

Besides being the savest way of managing your dependencies, it's also nice and clear for other developers or even yourself when looking at your code in the future.

获取数据应手动启动。而呈现在区域的图并触发查看来渲染，它不会触发视图的模式或收藏来获取数据。

Fetching data should be initiated manually. While showing a view in a Region does trigger the View to be rendered, it doesn't trigger the view's Model or Collection to fetch data.

你可以做什么，就是让你的视图听取事件的模式或收藏和重新渲染视图一旦模式或收藏已成功获取新的数据。
木偶的的CollectionView 自动绑定一些事件，以添加，变更和删除的事件是收藏在奥德自动管理它的 ItemViews 如果以任何方式收藏的变化。

What you can do, is to let your view listen to the events on your Model or Collection and re-render the view once the Model or Collection has successfully fetched new data. Marionette's CollectionView automatically binds some events to add, change and remove events of it's Collection in orde to automatically manage it's ItemViews if the Collection changes in any way.

正如我在第2个问题已经说过，这是很好的加载路由器 main.js 。

As I already stated in question 2, it's good to load your routers in main.js.

一个原因要做到这一点，是你可以决定不加载所有你的子应用前面，而只是一旦他们真正需要加载它们。这样的子应用的路线被触发的那一刻是一个很好的时间，因为任何加载子应用的核心模块，可能它的一些相关性，但会的课程要求子应用的路由器在子应用程序加载之前被激活。

One reason to do this, is that you could decide not to load all your sub-apps up front, but instead only load them once they're actually needed. The moment such a sub-app's routes get triggered is as good a time as any to load that sub-app's core module and possibly some of it's dependencies, but that would of-course require the sub-app's Router to be activated before the sub-app is loaded.

这篇关于如何同步/组织使用requirejs和Backbone.Marionette模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！