1

Backbone.Marionette、Backbone.Routerおよびを使用して Web アプリをブートストラップする最良の方法を探していRequirejsます。
次の実装は機能しますが、これが正しい方法であるかどうかを知りたいです。

これが私のコードの一部です（*）。

私の質問は:
1) 次のデータ フロー ( index.html-> conf.js-> router.js-> ) は正しいapp.jsですか?
2) Backbone.Viewfor each region ( header, sidebar.....) は、コンテキストに応じて、またはブースでインスタンス化する必要がありrouter.jsますapp.jsか?

// index.html
<!doctype html>
<html lang="en">
    <head>
        <!-- Load the script "/js/conf.js" as our entry point -->
        <script data-main="js/conf" src="js/vendor/require.js"></script>
     </head>
     <body>
     </body>


// js/config.js
require.config({
    // some code
});
require(['app']);  // instead of  require(['conf']); 

// router.js
define([
    'app',
    // others modules
],
function(App, $, _, Backbone, Marionette){
    "use strict";
    var AppRouter = Backbone.Marionette.AppRouter.extend({
        routes: {
            test: test,
            "*defaults": "home"
        }

    var initialize = function ()
    {
        var app_router = new AppRouter;
    };

    return {
        initialize: initialize
    };
});

// js/app.js
define(
[
    // some modules
],
function ($, _, Backbone, Router, Mustache, Layout, SidebarView) {
    var MyApp = new Backbone.Marionette.Application();

    MyApp.addInitializer(function () {
        $('body').html(Layout);
        MyApp.addRegions({
            header: '#header',
            sidebar: '#sidebar',
            mainColumn: '#main-column',
            rightColumn: '#right-column'
        });
    });

    MyApp.addInitializer(function () {
        var sidebarView = new SidebarView();
        MyApp.sidebar.show(sidebarView);
    });

    MyApp.on("initialize:after", function () {
//        Router.initialize();
    });

    MyApp.start();

    return MyApp;

});
4

1 に答える 1

3

これは全体的にかなり良いようです。変更する可能性のあるいくつかの点がありますが、これらは主に個人的な好みです。

1) ルーターとアプリ ファイルの関係を反転し、初期化子を使用してルーターを起動します。

現在、ルーターとアプリ ファイルの間に循環依存関係がありますが、これは決して良いことではありません。RequireJS はそれを問題なく処理できますが、期待どおりに動作しないコードにつながる可能性があるため、他の多くの点で悪い考えです。

2) ルーター ファイルで、ルーターをインスタンス化する初期化子を設定します。

3) ルーターファイルから backbone.history を開始しないでください。

プロジェクトに複数のルーターを使用することは一般的であり、推奨されています。ただし、電話できるのはBackbone.History.start()1 回だけです。ルーターの「after:initialize」イベントを使用して、app.js ファイルでそれを開始します。

MyApp.on("after:initialize", function(){ Backbone.History.start(); }

4) イニシャライザ コールバックを、単一のイニシャライザから呼び出される関数に抽出します。

複数のイニシャライザを使用しても技術的に問題はありませんが、複数のモジュールで複数のイニシャライザが必要になりますが、1 つのモジュール内で 1 つのイニシャライザを使用し、その 1 つのイニシャライザでモジュールで定義されている他の関数を呼び出すことをお勧めします。

5)addRegionsイニシャライザの外で呼び出す

イニシャライザが追加した順序で実行されるという保証はありません。個々のブラウザが物事をどのように処理するかによって異なります。

たとえば、app.js ファイルは次のようになります。


// js/app.js
define(
[
    // some modules
],
function ($, _, Backbone, Router, Mustache, Layout, SidebarView) {
    var MyApp = new Backbone.Marionette.Application();

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

    MyApp.addInitializer(function(){
       showLayout();
       initSidebar();
    });

    MyApp.on("initialize:after", function(){
      Backbone.History.start();
    });

    function initSidebar() {
        var sidebarView = new SidebarView();
        MyApp.sidebar.show(sidebarView);
    }

    function showLayout() {
        $('body').html(Layout);
    }

    MyApp.start();

    return MyApp;

});

...

よし、当初考えていたよりも多くの変更が加えられたようだ。:) しかし、私が言ったように、あなたのセットアップは全体的にうまく見えます. これらは私が行うことですが、アプリを機能させるための要件ではありません。

于 2012-06-14T12:58:51.373 に答える