私は Backbone.js と Backbone.Marionette を初めて使用し、アプリケーションの最適なパターンに従おうとしていくつかの問題を抱えています。
PhoneGap でカプセル化されたモバイル Web アプリケーションを作成しています。私は一般的なレイアウト (Facebook のような) を持っています: 2 つのサイドバー、メイン ヘッダー、およびすべてのビューが読み込まれるコンテンツ ゾーン。
Backbone.Marionette アプリケーションの初期化コードは次のとおりです。
var App = new Backbone.Marionette.Application();
App.addRegions({
leftRegion: '#left-drawer',
rightRegion: '#right-drawer',
headerRegion: '#header',
contentRegion: '#content',
mainRegion: '#main'
});
これは、コンテンツが添付される私の地域です。後で、ルーターを初期化した直後に、次のものがあります。
App.headerRegion.show(App.Views.Header);
App.leftRegion.show(App.Views.LeftSidebar);
App.rightRegion.show(App.Views.RightSidebar);
これにより、コンテンツがこの新しいリージョンに読み込まれます。この問題は HeaderView で発生します。私のヘッダービューのテンプレート:
<button id="open-left"><img src="assets/img/icons/menu-icon.png"></button>
<h1 class="title logo"><img src="assets/img/logo.png" height="28px" width="167px"></h1>
<button id="open-right"><img src="assets/img/icons/chat-icon.png"></button>
ItemView も非常にシンプルです。
var HeaderView = Backbone.Marionette.ItemView.extend({
template: _.template(template),
});
<img>
アプリの一部では、ヘッダーでを使用したくありません。アプリの一部のページでは、これをテキストに更新する必要があります。たとえば、<h1>Settings</h1>
. 私の質問は、それを行う最善の方法は何ですか? または、それを行う方法は何ですか?今のところ、どこから始めればよいかわかりません。私が念頭に置いている唯一のアイデアは、別のテンプレートで新しい ItemView を作成することです。
前もって感謝します!