0
我在使用Backbone的視圖和模板列出'licenses'時遇到問題。 的數據結構是這樣的：在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;
});
我買了模板和查看房源的堆棧許可詭計desplayind的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>
試試這個來檢查JSON？ http://jsonlint.com/ – theShay
有效的JSON，問題是我不知道熱我可以gab這個數據，並把它放在與骨幹的HTML – lipenco