骨干嵌套视图

我正在开发一个Backbone应用程序，我不知道我试图做的方式是否是正确的方式。骨干嵌套视图

我有一个应用程序视图，并在该应用程序视图内我试图追加一个集合视图，该集合中的每个视图也是一个集合。

让我用图解来解释。

---------------------------------------------------------------------- 
|                 | 
| Application view            | 
|                 | 
| ------------------------------------------------------------- | 
| | Windows Collection view         | | 
| |               | | 
| | -------------------------- -------------------------- | | 
| | | Tabs collection view | | Tabs collection view | | | 
| | |      | |      | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | | |Tab view| |Tab view| | | |Tab view| |Tab view| | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | |      | |      | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | | |Tab view| |Tab view| | | |Tab view| |Tab view| | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | |------------------------| |------------------------| | | 
| |               | | 
| | -------------------------- -------------------------- | | 
| | | Tabs collection view | | Tabs collection view | | | 
| | |      | |      | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | | |Tab view| |Tab view| | | |Tab view| |Tab view| | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | |      | |      | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | | |Tab view| |Tab view| | | |Tab view| |Tab view| | | | 
| | | ---------- ---------- | | ---------- ---------- | | | 
| | |------------------------| |------------------------| | | 
| |               | | 
| ------------------------------------------------------------- | 
|                 | 
|                 | 
----------------------------------------------------------------------

目前我加载在我的骨干路由器initialize方法应用视图。该视图加载了Windows collection view。

主要问题是我不确定我是否正确。第二个问题是我不确定如何从我的Windows Collecion view加载每个Tabs collection view。

PS：只是为了让事情更加清晰，我试图复制Firefox的全景：http://i.i.com.com/cnwk.1d/i/tim//2010/08/24/firefox-panorama.jpg

来源

2013-05-19 alexandernst

我只是张贴这在这里，以便其他人可以看到我是如何解决这个问题

的解决方案的工作演示可以found here（original fiddle）。

正如您从链接中看到的，感谢Marionette的CompositeView可以递归地呈现集合。

var TreeView = Backbone.Marionette.CompositeView.extend({ 

    initialize: function(){ 
     if(this.model.tabs){ 
      this.template = "#window-template"; 
     }else{ 
      this.template = "#tab-template"; 
     } 
     this.collection = this.model.tabs; 
    }, 

    appendHtml: function(cv, iv){ 
     cv.$("#tabs").append(iv.el); 
    }, 
    onRender: function() { 
     if(_.isUndefined(this.collection)){ 
      this.$("#tabs").remove(); 
     } 
    } 
});

我使用的初始化个小窍门（中的if/else与模板asignation）的工作方式如下：

我得到当前的模型并检查是否有一个“标签”键。如果它确实有它，这意味着目前的模式是一个窗口的数据模型，所以我需要使用window-template，否则使用tab-template

其余部分是相当多普通的骨架结构。

来源

2013-05-23 07:26:40 alexandernst

我会强烈建议使用Marionette.js来构建应用程序。

它已经具有内置的集合视图，使得渲染变得容易。你的应用程序似乎是一个完美的用例。您将免费获得许多样板代码。

来源

2013-05-22 22:01:25 lanan

骨干嵌套视图

回答

相关问题