如何佈置複雜的應用程序及其視圖/區域/佈局

Question

即使在閱讀了關於如何構建骨幹木偶應用程序的一些不錯的教程和博客帖子之後，我在編寫自己的應用程序時也感到困惑。這是我的設置。

我有一個應用程序，可以很容易地構造成不同的子應用程序（又名Backbone模塊） 點擊我的主導航欄中的鏈接啓動這些應用程序之一。這意味着它將開始佈局的應用程序加載到我的#main div中。

但是這些應用程序在其本身中有不同的佈局，因此在應用程序內部導航會覆蓋主應用程序佈局中指定的區域。

例如

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()) 

，從現在起我將無法訪問佈局。相冊或layout.artists甚至在使用後退按鈕後（使用Backbone.Router和History）

我是否應該將模塊的主佈局分割爲僅包含#app_main，並在單獨的步驟中將開放佈局加載到該佈局中？或者你有其他想法嗎？

Answer 1

作爲我自己項目中的一般規則，我總是將元素定義爲空，然後在Layout.onRender方法中動態加載它們。這在Marionette.Async中有額外的好處。如果我需要在顯示區域中的視圖之前從服務器加載其他數據，我可以在視圖的beforeRender方法中這樣做。

我的規則的一個例外是在區域的元素中顯示一個動畫「加載...」div，只要填充區域就會被覆蓋。

Answer 2

這將有助於更多地瞭解你要做什麼，但這裏有一個答案。讓我知道它是否有幫助！

比方說，這是你的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 --> 

對於我們的 「音樂」 子應用程序，我們將使用這個模板：

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

-

對於我們的 「書」 的子應用程序，我們將使用這個模板：

<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) 
    ... 
    } 
    ... 
}); 

我的天堂」 t測試了所有這些代碼，所以很抱歉，如果有一些扭曲，我相信它可以改進。

如果你還沒有讀David Sulc's tutorial，你應該看看 - 它會讓你更好地瞭解一個完整的應用程序。但我希望這給你一個基本的想法，你如何使用佈局和區域來顯示不同的子應用程序視圖。