[英]Rendering Backbone.js Collection as a select list
我正在尝试使用Underscore.js模板将Backbone.js集合渲染为select
列表,并且列表未填充。 select
元素正在显示,但没有options
。
我已经确认我能够将单个属性传递到我的模板并将它们渲染为label
元素,因此问题必须是我试图处理集合的方式。
这是我的Backbone代码:
Rate = Backbone.Model.extend({
duration : null
});
Rates = Backbone.Collection.extend({
initialize: function (model, options) {
}
});
AppView = Backbone.View.extend({
el: $('#rate-editor-container'),
initialize: function () {
this.rates = new Rates(null, { view: this } );
this.rates.add(new Rate ({ duration: "Not Set" }));
this.rates.add(new Rate ({ duration: "Weekly" }));
this.rates.add(new Rate ({ duration: "Monthly" }));
this.render();
},
render: function() {
var rate_select_template = _.template($("#rate_select_template").html(), {rates: this.rates, labelValue: 'Something' });
$('#rate-editor-container').html(rate_select_template);
},
});
var appview = new AppView();
我的模板:
<script type="text/template" id="rate_select_template">
<select id="rate-selector"></select>
<% _(rates).each(function(rate) { %>
<option value="<%= rate.duration %>"><%= rate.duration %></option>
<% }); %>
</script>
<div id="rate-editor-container"></div>
有什么建议?
你有几个不同的问题。
<option>
元素后 <select>
而不是里面 。 这将产生无效的HTML,浏览器将在您从模板中获取任何内容后进行屠宰。 rates
是骨干集合,这样它已经访问了下划线的 each
; 将其包装为_(rates)
只会混淆Underscore并防止任何迭代发生。 rate
是一个Backbone模型实例,所以它没有duration
属性,你必须说rate.get('duration')
。 您的模板看起来应该更像这样:
<script type="text/template" id="rate_select_template">
<select id="rate-selector">
<% rates.each(function(rate) { %>
<option value="<%= rate.get('duration') %>"><%= rate.get('duration') %></option>
<% }); %>
</select>
</script>
演示: http : //jsfiddle.net/ambiguous/AEqjn/
或者,您可以在模板中修复嵌套错误以生成有效的HTML:
<script type="text/template" id="rate_select_template">
<select id="rate-selector">
<% _(rates).each(function(rate) { %>
<option value="<%= rate.duration %>"><%= rate.duration %></option>
<% }); %>
</select>
</script>
并在视图中使用toJSON()
将原始数据提供给模板而不是集合本身:
var rate_select_template = _.template($("#rate_select_template").html(), {
rates: this.rates.toJSON(),
labelValue: 'Something'
});
演示: http : //jsfiddle.net/ambiguous/VAxFW/
我认为后者是你的目标,因为在Backbone中使用模板会采用更标准的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.