5

Marionette を使い始めたばかりで、 David SulcによるMarionette - A Gentle Introductionを読んでフォローしています。非常に読みやすく、コンパニオン リポジトリを使用してサンプル アプリケーションContact Managerを構築する手順を簡単に理解できます。

しかし、私は以前に RequireJS を使用してプロジェクトをセットアップしたことがあり、その本のアイデアと概念をこのプロジェクトに翻訳して統合したいと考えていました。私は実際にはそこまで進んでおらず、オブジェクトにつながる AMD モジュールと組み合わせてマリオネット モジュールを使用することについて少し混乱していると思いundefinedます。

より具体的に言うと、サンプル リポジトリのこのコミットのRequireJS バージョンであるとを挙げapp.jsてみましょう。listView.jslistController.js

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か？

これは、およびアプリケーションへのエントリ ポイントを含む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 は基本的に次のように機能します。特定のモジュールが持つすべての依存関係を宣言し、それらをコールバック関数内で使用します。

コードの問題は次のとおりです。 では、 RequireJS に関する限り、app.jsrequire のみが必要です。モジュールのコードが機能するためには、他に何も読み込まれません。しかし、その同じファイルで、 を呼び出します。それはどこから来たのですか？Nowhere: 現在のモジュール内で定義されておらず、依存関係として宣言されていません。したがって、それは存在せず、問題が発生します。marionetteContactManager.ContactsApp.List.Controller.listContacts()undefined

モジュールがメイン アプリケーションにアタッチされていると考えて、モジュールを参照することはできません。実際にアタッチされるのは、Marionette モジュール コードが実行されたときだけです。そのためには、依存関係として必須にする必要があります。

余談ですが、本書のコードは RequireJS 用に設計されていないため、この本のコードを RequireJS で使用するように適応させるのに苦労するでしょう (遭遇した問題に加えて、循環依存関係などがあります)。

この本を読んで Marionette 自体の感触をつかみ、それから RequireJS での使用を検討することをお勧めします。恥知らずなプラグ、私はmarionette と requirejs に関する本も書きました。

于 2013-09-13T11:46:56.850 に答える