3

バックボーンマリオネットアプリの構成方法に関するいくつかの素晴らしいチュートリアルやブログ投稿を読んだ後でも、自分で書いているときに混乱しました。これが私の設定です。

さまざまなサブアプリ（別名バックボーンモジュール）に簡単に構造化できるアプリがあります。メインナビゲーションバーのリンクをクリックすると、これらのアプリの1つが起動します。つまり、レイアウトを開始するアプリを#maindivにロードします。

ただし、これらのアプリ自体のレイアウトは異なるため、アプリ内を移動すると、メインのアプリレイアウトで指定された領域が上書きされます。

例えば

var myApp = Backbone.Marionette.Application()
...
var layout = myApp.myModule.layout = new Backbone.Marionette.Layout()
...
myApp.main.show(myApp.myModule.layout)

ここで、レイアウトには次のDOMツリーがあり、それぞれがリージョンにマップされています

#app_main
  .albums
  .artists

それから私は次のようなことをします

layout.app_main.show(new myView())

これからは、戻るボタンを使用した後でも（Backbone.RouterとHistoryを使用して）layout.albumsまたはlayout.artistsにアクセスできなくなります。

モジュールのメインレイアウトを分割して#app_mainのみを含め、別の手順でオープニングレイアウトをロードする必要がありますか？それとも他に何かアイデアはありますか？

4

2 に答える 2

3

あなたが何をしようとしているのかについてもう少し知っておくと役に立ちますが、ここに答えがあります. それが役立つかどうか教えてください！

これがあなたのHTMLレイアウトだとしましょう：

<div id="app">
  <div id="app_nav">
    <a href="#music">Music</a>
    <a href="#books">Books</a>
  </div>
  <div id="sub_app"></div>
</div> <!-- /#app_main -->

「Music」サブアプリでは、次のテンプレートを使用します。

<script id="musicApp-template" type="template/html">
  <div class="albums"></div>
  <div class="artists"><div>
</script>

アルバム アイテム ビューの場合:

<script id="album-template" type="template/html">
  <img src="<%=albumThumbSrc %>" />
  <p><%=albumTitle %></p>
</script>

アーティスト アイテム ビューの場合:

<script id="artist-template" type="template/html">
  <%=firstName %> <%=lastName %>
</script>

--

「Books」サブアプリでは、次のテンプレートを使用します。

<script id="booksApp-template" type="template/html">
  <div class="books"></div>
  <div class="authors"></div>
</script>

ブック アイテム ビューの場合:

<script id="book-template" type="template/html">
  <img src="<%=bookThumbSrc %>" />
  <p><%=bookTitle %></p>
</script>

アーティスト アイテム ビューの場合:

<script id="author-template" type="template/html">
  <%=firstName %> <%=lastName %>
</script>

アプリをブートストラップするには:

$(document).ready({
  myApp.start();
  if(!Backbone.history.started) Backbone.history.start();
});

--

次に、マリオネット ビューを設定します。

myApp.js 内

var myApp = new Backbone.Marionnette.Application();

myApp.addRegions({
  subAppRegion: "#sub_app"
});

// Your data
myApp.artists = new Backbone.Collection([...]);
myApp.books = new Backbone.Collection([...]);

myApp.musicApp.js 内

myApp.module("musicApp", function(musicApp, myApp) {
  /* Setup your Views
   ================== */
  var MusicLayout = Backbone.Marionette.Layout.extend({
    template: #musicApp-template",
    regions: {
      albumsRegion: ".albums",
      artistsRegion: ".artists"
    }
  });

  var AlbumView = Backbone.Marionette.ItemView.extend({
    template: "#album-template"
  });

  var AlbumListView = Backbone.Marionette.CollectionView({
    itemView: AlbumView
  });

  var ArtistView = ...
  var ArtistListView = ...

  /* Create router for app navigation
   ==================================== */
  var Router = Backbone.Marionette.AppRouter.extend({
    appRoutes: {
      "music" : showMusicApp
    },
    controller: musicApp
  });
  new Router();

  /* Method to show the music app
   ================== */
  musicApp.showMusicApp = function() {
    // Instantiate Views
    var musicLayout = new MusicLayout();
    var albumListView = new AlbumListView({ collection: myApp.albums });
    var artistListView = new ArtistsListView({ collection: myApp.artists });

    // Show musicApp layout in subAppRegion of main app
    myApp.subAppRegion.show(musicLayout);

    // Show albums and artists in musicApp layout
    layout.albumsRegion.show(albumListView);
    layout.artistsRegion.show(artistListView);
  }
});

myApp.booksAppモジュールをほぼ同じ方法でセットアップできます。

myApp.module("booksApp", function(booksApp, myApp) {
  ...
  var Router = Backbone.Marionette.AppRouter.extend({
    appRoutes: {
      "books" : showBooksApp
    },
    controller: booksApp
  });
  new Router();

  booksApp.showBooksApp = function() {
    ...
    myApp.subAppRegion.show(booksLayout)
    ...
  }
  ...
});

このコードをすべてテストしたわけではないので、問題があれば申し訳ありません。改善できると確信しています。

David Sulc のチュートリアルをまだ読んでいない場合は、ぜひ読んでみてください。本格的なアプリケーションについてのより良いアイデアが得られるでしょう。しかし、これで、レイアウトとリージョンを使用してさまざまなサブアプリ ビューを表示する方法の基本的なアイデアが得られることを願っています。

于 2012-10-27T19:14:57.977 に答える
0

私自身のプロジェクトでは原則として、領域を定義する要素を常に空のままにして、Layout.onRenderメソッドに動的にロードします。これには、Marionette.Async の追加の利点があります。リージョンにビューを表示する前に、サーバーから追加のデータをロードする必要がある場合は、ビューのbeforeRenderメソッドで実行できます。

私のルールの 1 つの例外は、アニメーション化された "loading..." div をリージョンの要素に表示することです。これは、リージョンにデータが入力されるとすぐに上書きされます。

于 2012-07-14T04:45:01.350 に答える