如何布置复杂的应用程序及其视图/区域/布局

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，你应该看看 - 它会让你更好地了解一个完整的应用程序。但我希望这给你一个基本的想法，你如何使用布局和区域来显示不同的子应用程序视图。