2011-09-30 58 views
4

我有一個Backbone應用程序,可以在您導航到的每個頁面上呈現多個相關的視圖。例如,一個頁面呈現以下觀點:你如何在Backbone中追加你的子視圖?

  • 語境酒吧
    • 下拉菜單
    • 分頁
  • 主表
    • 錶行

這裏的主要表視圖將被添加到我的路由器DOM第一 - 這個觀點reset內勢必會在其內部建立appendRows功能 - 其中就將此每個錶行:

// Instantiate the view, render and append it to the DOM 
var tableView = new TableView({ collection: blahCollection }); 
$("main").append(tableView.render().el); 

// Fetch the latest data for the collection (triggers a reset which appends rows) 
blahCollection.fetch(); 

這似乎是合乎邏輯對我來說,然而當談到添加分頁子視圖時,我會問自己這個問題:「應該真正控制視圖附加到屏幕上嗎?」

因此,給定的分頁例如:

  • 應的視圖(在這種情況下,主表視圖)控制如何/時分頁被附加到DOM?
  • 應該路由器?如果是這樣,它是否應該調用父視圖上的函數來執行此操作 - 還是應該將邏輯完全保存在主視圖之外?

回答

4

我喜歡讓我的路由器爲我做很多高級別的東西。舉例來說,我將建立一個基本的佈局......是這樣的:

<body> 
    <div id="contextBar"> 
     <div id="menus"></div> 
     <div id="pagination"></div> 
    </div> 
    <div id="mainTable"></div> 
</body> 

然後,在我的路由器的處理程序,我連上是互不相關的意見:

var contextView = new ContextView({el: $("#contextBar")}); 
var menusView = new MenusView({el: $("#menus")}); 
var paginationView = new PaginationView({el: $("#pagination")}); 
var tableView = new MainTableView({el: $("#mainTable")}); 

就主表而言,我看到表視圖和行視圖緊密耦合,因爲它們彼此直接相關,所以我通常有集合視圖(您的表視圖)創建和管理單個項視圖(你的表格行視圖)。

至少,這就是我如何使用Backbone組織我的代碼。

+0

我在路由視圖和子視圖之間做了區分。通常,對於路由視圖,我有一個處理顯示/隱藏的父類,使用「when(隱藏所有視圖).then(顯示此視圖)」模式。 –