我在使用 Backbone 的视图和模板列出“许可证”时遇到问题。数据结构是这样的：
{
"items":
[
{
"id": "1",
"name": "Hello Kitty",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"slug": "brand-1",
"img": "hellokitty",
"code": "131T003-2",
"category": "children",
"licences": "5",
"licence": [
{
"_id": "1",
"price": "22",
"type": "type1",
"text": "this is the description of this licence"
}, {
"_id": "2",
"price": "24",
"type": "type1",
"text": "this is the description of this licence"
}
]
},
{
"id": "2",
"name": "Lana Del Ray",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"slug": "brand-2",
"img": "lana",
"code": "p-002",
"category": "music",
"licences": "5",
"licence": [
{
"_id": "3",
"price": "22",
"type": "type6",
"text": "this is the description of this licence"
}, {
"_id": "4",
"price": "22",
"type": "type7",
"text": "this is the description of this licence"
}
]
}
}
我正在使用许可证模型和项目模型，我还为两者创建了集合：
商品型号：
define(["backbone", 'models/licenceModel', 'backbone-relational'], function(Backbone, Licence){
Item = Backbone.RelationalModel.extend({
relations : [{
key : 'licence',
type : Backbone.HasMany,
relatedModel : Licence,
collectionType: 'licenceCollection'
}]
defaults: {
"id": "",
"name": "",
"description": "",
"slug": "",
"img": "",
"price": "",
"code": "",
"category": "",
"licences": ""
}
});
return Item;
});
许可模式：
define(["backbone", 'models/itemModel', 'backbone-relational'], function(Backbone, Item){
Licence = Backbone.RelationalModel.extend({
defaults: {
"_id": "",
"type": "",
"text": "",
"price": "",
}
});
return Item;
});
物品收藏：
define(['backbone', 'models/itemModel'],
function(Backbone, Item) {
var ItemCollection = Backbone.Collection.extend({
defaults: {
model: Item
},
model: Item,
url: 'json/items.json',
initialize: function(){
this.fetch( { async: false } );
},
parse: function(response, xhr) {
return response.items;
},
filterBySlug: function( sl ) {
return filtered = this.filter(function(data) {
return data.get('slug') == sl;
});
},
filterByName: function( name ){
filtered = this.filter(function(data) {
if(data.get("name").toLowerCase().indexOf(name) > -1){
return data;
}
});
return new ItemCollection(filtered);
},
filterById: function(id){
return this.get(id);
}
});
return ItemCollection;
});
许可证收集：
define(['backbone', 'models/licenceModel'],
function(Backbone, Licence) {
var LicenceCollection = Backbone.Collection.extend({
defaults: {
model: Licence
},
model: Licence,
url: 'json/items.json',
initialize: function(){
this.fetch( { async: false } );
},
parse: function(response, xhr) {
return response.licence;
}
});
return LicenceCollection;
});
我得到了带有模板和视图的堆栈，用于在 deplayind detailView 中列出许可证：
define(
['jquery',
'backbone',
'underscore',
'models/itemModel',
'text!/templates/detail_template.html'],
function($, Backbone, _, Item, Template){
var DetailView = Backbone.View.extend({
el: '#todo-list',
productInfo: $('.product_info'),
tagName: 'li',
model: Item,
events: {
"click #back": "backToList"
},
initialize: function( collection ) {
this.collection = collection;
this.render();
},
render: function() {
var compiledTemplate = _.template( Template, this.collection[0].toJSON() );
container = this.$el;
this.$el.html( compiledTemplate );
this.$el.find('li').fadeIn('slow', function(){
container.find('.info').fadeIn('slow');
});
},
backToList: function(ev){
//ev.preventDefault();
$('#clear').trigger('click');
}
});
return DetailView;
});
我应该怎么做才能在此模板中列出许可证：
<li id="detail_view" class="row-fluid" data-item="<%- slug %>" data-id="<%- id %>">
<div class="span6">
<a href="/" id="back">Back to List</a>
<img src="/assets/images/<%- img %>.jpg" class="product" />
</div>
<div class="info span6">
<div id="container_info">
<h2><%- name %></h2>
<div class="title"><%- description %> </div>
<div class="code"><strong><%- category %></strong></div>
</div>
</div>
</li>