我有點迷失在我的視圖渲染 - 第一次嘗試做到這一點。我有我的模板設置類似於這個應用程序。CompositeView沒有渲染ItemViews,甚至沒有觸發appendHtml
到目前爲止,我已經爲CompositeView渲染了模板,但它沒有渲染任何ItemViews。它甚至不觸發渲染方法來嘗試調試所以我不知道在哪裏可以登錄件看到它卡住......下面的代碼:
這是我的ItemView控件:
define([
'jquery',
'underscore',
'backbone',
'text!templates/service/item.ejs'
], function($, _, Backbone, template) {
ServiceItemView = Backbone.Marionette.ItemView.extend({
tagName: 'tr',
template: '#service-item-template'
});
}
);
這是我CompositeView中:更新:加在我requirejs代碼表明ServiceItemView ServiceTableView之前加載
define([
'jquery',
'underscore',
'backbone',
'views/service/item',
'text!templates/service/table.ejs'
], function($, _, Backbone, ServiceItemView, template) {
var ServiceTableView;
ServiceTableView = Backbone.Marionette.CompositeView.extend({
tagName: 'table',
id: 'service-table',
itemView: ServiceItemView,
itemViewContainer: 'tbody',
template: '#service-table-template',
appendHtml: function(collectionView, itemView){
console.log("here");
//collectionView.$("tbody").append(itemView.el);
}
});
}
);
這裏就是我試圖使其:
service_collection = new ServiceCollection([
new Service({
name: "Men's Cut",
length: 108000,
price: 2500
}),
new Service({
name: "Women's Cut",
length: 324000,
price: 5000
})
]);
service_table = new ServiceTableView({
collection: service_collection
});
App.main_region.show(service_table);
更新:這裏有兩個模板:
ServiceItemView模板:
<script type="text/html" id="service-item-template">
<td><%= name %></td>
<td><%= length %></td>
<td><%= price %></td>
<td class="actions">
<input type="button" class="icon" value="Delete" />
</td>
</script>
ServiceTableView模板:
<script type="text/html" id="service-table-template">
<thead>
<tr>
<th>Name</td>
<th>Time allotment</th>
<th>Pricing</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</script>
同樣,ServiceTableView模板呈現,但沒有的服務在下面呈現。
任何幫助表示讚賞。甚至指向哪裏堅持日誌語句以獲取更多信息。
謝謝!
首先檢查:確保ServiceItemView在ServiceTableView之前聲明。孩子必須在父母面前宣佈(這是Backbone/JavaScript限制,而不是Marionette)。 –
也 - 您可以包括您的表和項目視圖的模板? –
@DerickBailey現在檢查並更新問題,謝謝。 – Matt