backbone.js使用牽線木偶模板的集合視圖示例

Question

您能否給我推薦一些通過牽線木偶模板系統顯示列表視圖的示例。基本上，我有一個木偶模板，並基於模板創建一個表格列表。

Answer 1

要創建骨幹木偶錶行的列表，你需要定義的五件事：

• 用於每一行
• 集合模型來保存所有的行模式
• 一個CollectionView遍歷集合
• 提供行特定功能的ItemView
• ItemView的模板提供了標記fo R各自排

樣本用法

假設你有以下數據：

var stooges = [{ name: 'moe', age: 44, userid: 1}, 
       { name: 'larry', age: 44, userid: 2}, 
       { name: 'curly', age: 44, userid: 3}]; 

定義模型和收集

對於下面的數據你會希望有一個型號：

var StoogeModel = Backbone.Model.extend({}); 

你在哪裏可以爲您的數據和其他屬性設置一些合理的默認值，如idAttribute。有很多關於如何定製你的模型的參考。您的收藏至少應採用stoogeModel。

var StoogeCollection = Backbone.Collection.extend({ 
    model: StoogeModel 
}); 

設置你的觀點

要遍歷和渲染您的收藏到表中，所有你需要的是一個CollectionView和ItemView。

var StoogesCollectionView = Backbone.Marionette.CollectionView.extend({ 
    tagName: "table", 
    childView: StoogeItemView 
}); 

所有CollectionViews需要以最小的一個childView這是一個ItemView（我們將在下面定義），他們將利用導出功能來創建每一行的HTML和collection這是集合拿着模型填充每一行。當我們安裝stoogesCollectionView時，我們會通過此集合。 tagName屬性通知Backbone將子節點封裝在table標記中。

var StoogeItemView = Backbone.Marionette.ItemView.extend({ 
    tagName: "tr", 
    template: '#stooge-template' 
}); 

<script type="text/template" id="stooge-template"> 
    <td id="name"><%= name %></td> 
    <td id="age"><%= age%></td> 
    <td id="userid"><%= userid%></td> 
</script> 

所有ItemViews需要我們我們的HTML文檔中定義的模板，在這裏它的#stooge-template。如果ItemView是集合的子集，則不必定義其模型，它將由父級CollectionView提供。由每個子節點StoogeItemView呈現的HTML將被tr標記封裝，因爲我們想要的是集合視圖中每個子節點的一行。

從ItemView您可以處理「行」級別的事件，例如行列上的click或focus。您也可以處理傳入的模型的更改。此外，從ItemView您可以決定傳遞助手，可以操縱數據顯示在其模板中的方式。

全部放在一起

現在我們已經定義了我們的模型，收集，集合視圖，子項視圖和項目視圖模板。接下來，我們將連接所有這些作品。

填寫您的收藏

您通過走狗的陣列到您的收藏的構造英寸

var myStooges = new StoogeCollection(stooges); 

這些被塑造成模型，他們加載您的收藏。

啓你的CollectionView

你通過加載收集到您的收藏視圖。

var myStoogesView = new StoogesCollectionView({ collection: myStooges }); 

渲染視圖

所有木偶的觀點來包裝用render方法。在我們的例子中，調用

myStoogesView.render(); 

將創建一個<table>有三個<tr>元件分別與每個在我們的數據集中的name，age和userid字段列。要將生成的HTML插入到DOM中，我們只需使用視圖的el屬性。對於simplicty，我們可以注入視圖直入體內

document.body.appendChild(myStoogesView.el); 

或使用jQuery：

$(document.body).append(myStoogesView.el); 

除了這個例子

有多功能，我們甚至沒有開始討論。閱讀docs！並查看許多教程。希望這個簡短的介紹有幫助！