带有 Backbone 的下划线模板
Underscore templates with Backbone
我是 backbone 框架的新手。我有一个包含项目数组的模型 itemsOnSaleModel
和呈现这些项目的视图 itemListView
。问题是我不知道如何正确编写模板。通常在这种情况下我会写这样的东西:
<script type="text/template" id="listTemplate">
<ul id = "list">
<% for (var i=0; i< items.length; i++) { %>
<li><%=items[i].age %><br>
<%=items[i].name%><br>
<%=items[i].id%><br>
<img src="<%=items[i].imageUrl%>"/><br>
<%=items[i].snippet%><br>
<p>Price: <%=items[i].price%></p>
<button id="<%=items[i].id%>" class="buyButton btn btn-success" type="submit">Buy</button>
</li>
<% } %>
</ul>
</script>
代码示例:
var itemsOnSaleModel = Backbone.Model.extend({
defaults:{
_items: null
}
});
var itemListView = Backbone.View.extend({
_template: _.template($('#listTemplate').html()),
el: $('#phonesDiv'),
events: {
'click .buyButton':'_addToCart'
},
initialize: function () {
'use strict';
this.render();
},
render: function () {
'use strict';
var rendTemplate = this._template(this.model.attributes);
this.$el.html(rendTemplate);
return this;
}
});
var itemsOnSale = new itemsOnSaleModel;
itemsOnSale.set({'_items': phones});
var itemList = new itemListView({model: itemsOnSale});
正在传递给模型的 phones 数组示例:
var phones = [
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).",
"price": 150
},
您的问题是您在模板中引用了集合 items,但没有将其传递到模板中。您可以将模板更改为使用 _item 而不是 (<% for (var i=0; i< _items.length; i++) { %> ...
) 或者当您编译模板时您可以将项目列表传递给模板中的项目变量
var rendTemplate = this._template({items: this.model.get('_items')});
我是 backbone 框架的新手。我有一个包含项目数组的模型 itemsOnSaleModel
和呈现这些项目的视图 itemListView
。问题是我不知道如何正确编写模板。通常在这种情况下我会写这样的东西:
<script type="text/template" id="listTemplate">
<ul id = "list">
<% for (var i=0; i< items.length; i++) { %>
<li><%=items[i].age %><br>
<%=items[i].name%><br>
<%=items[i].id%><br>
<img src="<%=items[i].imageUrl%>"/><br>
<%=items[i].snippet%><br>
<p>Price: <%=items[i].price%></p>
<button id="<%=items[i].id%>" class="buyButton btn btn-success" type="submit">Buy</button>
</li>
<% } %>
</ul>
</script>
代码示例:
var itemsOnSaleModel = Backbone.Model.extend({
defaults:{
_items: null
}
});
var itemListView = Backbone.View.extend({
_template: _.template($('#listTemplate').html()),
el: $('#phonesDiv'),
events: {
'click .buyButton':'_addToCart'
},
initialize: function () {
'use strict';
this.render();
},
render: function () {
'use strict';
var rendTemplate = this._template(this.model.attributes);
this.$el.html(rendTemplate);
return this;
}
});
var itemsOnSale = new itemsOnSaleModel;
itemsOnSale.set({'_items': phones});
var itemList = new itemListView({model: itemsOnSale});
正在传递给模型的 phones 数组示例:
var phones = [
{
"age": 0,
"id": "motorola-xoom-with-wi-fi",
"imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
"name": "Motorola XOOM\u2122 with Wi-Fi",
"snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).",
"price": 150
},
您的问题是您在模板中引用了集合 items,但没有将其传递到模板中。您可以将模板更改为使用 _item 而不是 (<% for (var i=0; i< _items.length; i++) { %> ...
) 或者当您编译模板时您可以将项目列表传递给模板中的项目变量
var rendTemplate = this._template({items: this.model.get('_items')});