javascript - Backbone Marionette 和 RequireJS 模块混淆——模块似乎未定义

Question

我刚开始使用 Marionette，我正在阅读并关注 Marionette - A Gentle Introduction通过 David Sulc .这是一本非常好的读物，很容易理解如何使用 companion repository 构建示例应用程序 Contact Manager .

但是，我之前已经使用RequireJS建立了一个项目，想将那本书的思想和概念转化并整合到这个项目中。我实际上还没有走那么远，我想我可能对 Marionette 模块与 AMD 模块的结合使用有点困惑，这导致了 undefined对象。

更具体地说，让我列出app.js , listView.js和 listController.js这应该是这个 commit of the sample repo 的 RequireJS 版本.

app.js

/*global define*/
define([
    'marionette'
], function ( Marionette ) {
    'use strict';

    var ContactManager = new Marionette.Application();

    ContactManager.addRegions({
        mainRegion : '#main-region'
    });

    ContactManager.on( 'initialize:after', function() {

        ContactManager.ContactsApp.List.Controller.listContacts();
    });

    return ContactManager;
});

listView.js

/*global define*/
define([
    'app',
    'marionette',
    'handlebars',
    'text!templates/contact.hbs'
], function ( ContactManager, Marionette, Handlebars, contactTemplate ) {
    'use strict';

    var List = ContactManager.module( 'ContactsApp.List' );

    List.Contact = Marionette.ItemView.extend({

        tagName: 'li',
        template : Handlebars.compile( contactTemplate ),

    });

    List.Contacts = Marionette.CollectionView.extend({

        tagName: 'ul',
        itemView: List.Contact
    });

    return List;
});

listController.js

/*global define*/
define([
    'app'
], function ( ContactManager ) {
    'use strict';

    var List = ContactManager.module( 'ContactsApp.List');

    List.Controller = {

        listContacts: function() {

            var contacts = ContactManager.request('contact:entities');

            var contactsListView = new ContactManager.ContactsApp.List.Contacts({
                collection: contacts
            });

            ContactManager.mainRegion.show( contactsListView );
        }
    };

    return List.Controller;
});

所以，我得到的错误是 Uncaught TypeError: Cannot read property 'List' of undefined在 app.js:15这是指这一行:

ContactManager.ContactsApp.List.Controller.listContacts();

这意味着 ContactsApp模块是 undefined而这正是我不明白的。

据我所知，我附上了 ContactsApp模块和 List ContactManager 的子模块在listView.js里面或 listController.js (以先调用者为准)与行:

ContactManager.module( 'ContactsApp.List' );

不应该 ContactsApp在 app.js 中定义那么呢？

这是包含 require.config 的 ma​​in.js 文件以及应用程序的入口点:

require.config({
    baseUrl: './scripts',
    paths: {
        jquery     : '../bower_components/jquery/jquery',
        underscore : '../bower_components/underscore/underscore',
        backbone   : '../bower_components/backbone/backbone',
        marionette : '../bower_components/backbone.marionette/lib/backbone.marionette',
        bootstrap  : '../bower_components/sass-bootstrap/dist/js/bootstrap',
        text       : '../bower_components/requirejs-text/text',
        handlebars : '../bower_components/handlebars/handlebars',
        templates  : '../templates'
    },

    shim: {
        underscore : {
            exports : '_'
        },
        backbone : {
            deps : [ 'underscore', 'jquery' ],
            exports : 'Backbone'
        },
        marionette : {
            deps : [ 'backbone' ],
            exports : 'Backbone.Marionette'
        },
        bootstrap : {
            deps : [ 'jquery' ],
        },
        handlebars : {
            exports : 'Handlebars'
        }
    },
    deps : [ 'jquery', 'underscore' ]
});

require([
    'app',
    'bootstrap'
], function ( ContactManager ) {
    'use strict';

    ContactManager.start();
});

Answer 1

RequireJS 基本上是这样工作的:声明给定模块具有的所有依赖项，然后在回调函数中使用它们。

这是你的代码的问题:在 app.js 中，你只需要 marionette 所以就 RequireJS 而言，没有应该加载模块的代码才能发挥作用。但是随后，在同一个文件中，您调用了 ContactManager.ContactsApp.List.Controller.listContacts()。那是从哪里来的？无处:它未在当前模块中定义，也未声明为依赖项。因此，它不存在，您会遇到 undefined 问题。

您不能只引用该模块，认为它附加到主应用程序:它只有在执行 Marionette 模块代码时才真正附加。为此，它需要作为依赖项被要求。

顺便说一句，你将很难调整本书的代码以与 RequireJS 一起使用，因为它不是为 RequireJS 使用而设计的(除了你遇到的问题，你还会有循环依赖等.).

我建议您先通读本书，对 Marionette 本身有一个良好的感觉，然后再考虑将其与 RequireJS 一起使用。无耻的外挂，我也写了一个book on marionette and requirejs .