将Backbone.js集合呈现为选择列表
将Backbone.js集合呈现为选择列表
提问于 2012-02-06 09:12:52
我尝试使用Underscore.js模板将Backbone.js集合呈现为select列表，但是该列表没有被填充。正在显示select元素，但没有options。
我已经确认我能够将各个属性传递到我的模板中，并将它们呈现为label元素，所以问题一定是我试图处理集合的方式。
下面是我的主干代码：
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>有什么建议吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-02-06 09:39:54
你有几个不同的问题。
- 您的模板正在尝试将
<option>元素放在<select>之后，而不是放在它内部。这会产生无效的超文本标记语言，一旦你从你的template. rates中得到任何东西，浏览器就会认为它是一个主干集合，所以它已经可以访问happening.- Inside
each了；将它包装成_(rates)只会混淆下划线，并阻止来自Underscore'seach的任何迭代，rate是一个主干模型实例，所以它不会有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中使用模板的更标准方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9154628
复制相关文章
相似问题