2

現在、バックボーン マリオネット アプリを作成しています。これは最終的に約 6 つの異なる「画面」またはページになり、コンテンツを共有することが多く、リージョンを最適に構造化してアクセスする方法がわかりません。

ここで説明されているアプリ/モジュールのセットアップを使用しています: StackOverflow question 11070408: How to define/use several routings using backbone and require.js . これは、時間の経過とともに新しい機能とコンテンツが追加され、スケーラブルである必要がある (そして明らかに可能な限り再利用可能である) アプリケーションになります。

私が構築しているシングル ページ アプリには、すべての画面に、ヘッダー、プライマリ コンテンツ、セカンダリ コンテンツ、フッターの 4 つのプライマリ セクションがあります。

フッターはすべてのページで一貫しており、ヘッダーは 3 ページで同じで、残りの 3 ページではわずかに変更されています (同じ要素/コンテンツの約 80% を使用)。「morecontent」領域は、さまざまなページで再利用できます。

私の app.js ファイルでは、次のようにリージョンを定義しています。

define(['views/LandingScreen', 'views/Header', 'router'], function(LandingScreen, Header, Router) {
    "use strict";
    var App = new Backbone.Marionette.Application();

    App.addRegions({
        header: '#mainHeader',
        maincontent: '#mainContent',
        morecontent: '#moreContent',
        footer: '#mainFooter'
    });

    App.addInitializer(function (options) {

    });

    App.on("initialize:after", function () {
        if (!Backbone.History.started) Backbone.history.start();
    });

    return App;
});

さて、前述の投稿のアプリのセットアップを参照すると、リージョンを処理するための最良の方法は何でしょうか. 各サブアプリの各リージョンを個別に再宣言しますか? これは、モジュールをできるだけ独立した状態に保つための最良の方法のようです。そのルートに行く場合、サブアプリ間でこれらの領域を開閉または非表示/表示する最良の方法は何ですか?

または、app.js で宣言されたリージョンを保持する必要がありますか? もしそうなら、どのようにサブアプリからそれらの地域のイベントを変更し、調整するのが最善でしょうか? app.js ファイルで定義されたリージョンを持つことは、どのモジュールとコアアプリがお互いについて知っているかを最小限に抑えるのに直感に反するようです。さらに、私が目にするすべての例には、メインのアプリ ファイルに appRegions メソッドがあります。サブアプリからこれらのリージョンにアクセスして変更するためのベスト プラクティスは何ですか?

前もって感謝します！

4

2 に答える 2

4

私は実際にサブアプリケーションの起動を処理するルートアプリを持っており、それらが表示される領域を通過します。Backbone.SubRouteまた、サブアプリケーションの相対ルーティングを可能にするベースのカスタムコンポーネントを使用します。

この要点を確認してください：https ：//gist.github.com/4185418

regionサブアプリケーションのstartメソッドに送信する値の代わりに、複数のリージョンを定義するaddRegionsの「config」オブジェクトを送信するように簡単に調整できます。

マリオネットに電話をかけるとsomeRegion.show(view)、現在表示されているビューが最初に閉じられることに注意してください。2つの異なるリージョンがあり、それぞれが独自のアプリで定義されているが、どちらも同じDOM要素にバインドしている場合、重要なのは、どちらのリージョンが最後にshow呼び出されたかだけです。ただし、前のビューを閉じる利点が得られないため、これは面倒です。たとえば、イベントバインダーのバインドを解除します。

そのため、ある種のルートアプリからリージョンを「継承」するサブアプリがある場合、通常はそのルートアプリからサブアプリに実際のリージョンインスタンスを渡し、そのリージョンへの参照を次のように保存します。サブアプリのプロパティ。そうすれば、私はまだ電話subApp.regionName.show(view)をかけることができ、それは完璧に機能します-あなたがあなたの地域からあなたのアプリケーションにイベントをバブルしようとしている場合（地域はルートアプリに属する​​ので、サブアプリ）。この問題を回避するには、ほとんどの場合Marionette.EventAggregator、リージョン/ビュー/コントローラーなどの組み込み機能に依存するのではなく、の別のインスタンスを使用してイベントを管理します。

とはいえ、両方の長所を活かすことができます。リージョンインスタンスをサブアプリに渡し、その参照を保存して「close」を呼び出し、そのregionInstance.elプロパティを使用して、を指す独自のリージョンインスタンスを定義できます。同じ要素。 

for(var reg in regions) if regions.hasOwnProperty(reg) {
    var regionManager = Marionette.Region.buildRegion(regions[reg].el,
            Marionette.Region);
    thisApp[reg] = regionManager;
}

それはすべてあなたの優先順位に依存します。

于 2012-12-11T22:19:52.193 に答える
2

私は個人的に、Marionetteアプリケーションでモジュールを使用することを好みます。require.jsがアプリケーションに追加する複雑さを取り除くことができると思います。現在作業中のアプリで、バックボーンアプリケーションを定義するapp.jsファイルを1つ作成しましたが、ルートを読み込み、コレクションを埋め、リージョンにデータを入力するコントローラーモジュールを使用しています。

app.js->

var app = new Backbone.Marionette.Application();
app.addRegions({
   region1: "#region1",
   region2: "#region2",
   region3: "#region3",
   region4: "#region4"
});

app.mainapp.js->

app.module('MainApp', function(MainApp, App, Backbone, Marionette, $, _) {
   // AppObjects is an object that holds a collection for each region, 
   // this makes it accessible to other parts of the application
   // by calling app.MainApp.AppObjects.CollectionName.... 
   MainApp.AppObjects = new App.AppObjects.Core();

   MainApp.Controller = new Backbone.Marionette.Controller.extend({
     start: function() {
       // place some code here you want to run when the controller starts
     } //, you can place other methods inside your controller
   });

   // This code is ran by Marionette when the modules are loaded
   MainApp.addInitializer(function() {
     var controller = new MainApp.Controller();
     controller.start();
   });
});

次に、コントローラーでアクセスされる別のモジュール内にルートを配置します。

次に、Webページで、を呼び出すことからすべてを開始します。

$(function () {
    app.start();
});

Marionetteは自動的に実行され、すべてのモジュールをロードします。

これにより、あなたが何らかの方向に着手できることを願っています。申し訳ありませんが、より良い例を示すために、アプリケーションコード全体をコピーして貼り付けることができませんでした。このプロジェクトが完了したら、Webにプッシュできるデモアプリを再作成します。

于 2012-12-04T01:17:19.527 に答える