2

我以这种方式组织了使用RequireJs和Backbone.Marionette的网络应用程序的文件结构：

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

要加载我使用 requireJs 的模块。
这是我的代码，对于每个模块我都提出了一些问题。

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

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

// 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可能需要一些models我决定将其加载到app.js. 这条路对吗？

// 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。应该没问题吧？

// 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.jssubapp1/subapp1.routersubapp1/subapp1

4

1 回答 1

1

1）即使子应用程序需要应用程序，异步加载应用程序和子应用程序是否正确？

您应该能够异步加载您的app和任何sub-apps. 如果sub-apps需要 main app，他们应该将其列为依赖项。RequireJS 将为您解决依赖关系。

您唯一应该注意的是循环依赖关系，但这不应该是您无法解决的问题。

2）对于subApps是否正确加载需要该应用程序的路由器？

对我来说，在你的声音中列出routers你的。sub-appsmain.js

3）由于subApps可能需要一些models我决定将其加载到app.js. 这条路对吗？

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

这样，如果您以不再需要的方式更改任何模块，则models/user.js可以从该特定模块中删除依赖项，而不会冒丢失另一个模块中的依赖项的风险。

除了作为管理依赖项的最省钱方式之外，它对其他开发人员甚至您自己在将来查看您的代码时也很方便。

4）关于这个模块，我不确定app.addInitializer.

例如，我不确定是否app.userModel会在我执行时获取app.header.show。应该没问题吧？

应手动启动获取数据。虽然在 a 中显示视图Region确实会触发View渲染，但它不会触发视图Model或Collection获取数据。

您可以做的是让您在orview上收听事件，并在or成功获取新数据后重新渲染视图。Marionette's自动将一些事件绑定到，并且它的事件是为了自动管理它，如果以任何方式发生变化。ModelCollectionModelCollectionCollectionViewaddchangeremoveCollectionItemViewsCollection

main.js5）可以从而subapp1/subapp1.router不是加载subapp1/subapp1吗？

正如我在问题 2 中已经说过的，最好将您的路由器加载到main.js.

这样做的一个原因是，您可以决定不预先加载所有内容sub-apps，而是仅在实际需要时才加载它们。sub-app触发这样的路由的那一刻与加载sub-app核心模块以及可能的一些依赖项一样好，但这当然需要在加载之前激活sub-app's 。Routersub-app

于 2013-01-02T19:38:58.257 回答