5

我刚开始使用 Marionette，我正在阅读Marionette - David Sulc的温柔介绍。这是一本非常好的读物，并且很容易理解构建示例应用程序Contact Manager和配套存储库。

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

更具体地说，让我列出app.js，listView.js它listController.js应该是示例 repo 的此提交的RequireJS 版本。

应用程序.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;
});

列表视图.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吗？

这是main.js文件，其中包括require.config应用程序的入口点：

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();
});
4

1 回答 1

7

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

这是您的代码的问题：在 中app.js，您只需要marionette就 RequireJS 而言，不应该加载任何其他内容以使模块的代码正常工作。但是，在同一个文件中，您调用ContactManager.ContactsApp.List.Controller.listContacts(). 那是从哪里来的？无处：它没有在当前模块中定义，也没有声明为依赖项。因此，它不存在，您会遇到undefined问题。

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

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

我建议您直接阅读本书以对 Marionette 本身有一个很好的感觉，然后考虑将它与 RequireJS 一起使用。无耻的插件，我还写了一本关于木偶和requirejs的书。

于 2013-09-13T11:46:56.850 回答