骨幹嵌套視圖

我正在開發一個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

骨幹嵌套視圖

回答

相關問題