在骨干中为相关模型创建视图和模板
Creating view and template for related models in Backbone
我在列出带有 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;
});
我得到了带有模板和视图的堆栈,用于列出许可证的详细信息视图:
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>
我可能错过了它,但你实际上是在任何地方创建视图的实例吗?
您已经定义了一个并将渲染调用放入初始化中,但是您需要创建它来启动事情,无论是显式还是通过路由器和 history.start() 调用...
我不确定的另一部分是您的模板用法 - 我不熟悉下划线用法,但希望您使用没有任何数据的 _.template 调用编译模板一次,然后用数据调用其结果以获取 html 如此处。
相关文章:
- 如何使用javascript从主svg对象动态创建svg视图框
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 需要一个与HTML5<音频>.哪些没有't创建或销毁视图
- 遍历SC.ManyArrray以创建要附加到SproutCore中的另一个视图的自定义视图
- 在Django中,可以在视图中创建一个包含js的变量,然后在循环模板标记中使用它
- 调用在同一视图中使用javascript在视图中创建的函数
- 自定义筛选器不'我不使用django数据表视图创建的ajax.data.Json
- 动态创建角度视图
- 主干网的生命周期.js创建过程中的视图
- 在PHP循环中动态创建jQuery列表视图
- 创建表时在marionete.js中嵌套视图
- 在创建视图mvc.net的过程中使用javascript
- 在 Node.js 视图中创建 OpenLayers 映射
- 如何在Backbone中创建自实例化视图
- 创建从单个模板继承的多个动态视图
- 如何在WinJS中为列表视图创建排序功能
- ExtJS 视图创建
- 为两个视图创建指令
- 在我重新解析从部分视图创建的表单后,jQuery提交事件不触发
- Pouchdb,视图创建似乎使正常的数据不可用