javascript - 下划线 js 模板中的循环

Question

好的，所以我有这个密钥对值数组，我将其用作我的模型：

var acs = [{'label':'input box'},{'label':'text area'}];

其余代码如下

var Action = Backbone.Model.extend({});
var action = new Action(acs);
var ActionView = Backbone.View.extend({
    tagName:"li",
    template: _.template($('#actions-template').html()),
    events:{
        "click":"makeInput"
    },
    render:function(){
        $(this.el).html(this.template(this.model.toJSON()));
        $(".hero-unit>ul").append(this.el);
        return this;
    },
    makeInput:function(){
        alert("im in");
    }
});
var actionView = new ActionView({model:action});
actionView.render();

问题在于观点。如果这是我想要的视图，我如何循环遍历我正在传递的模型

<script type="text/template" id="actions-template">
<% _.each(action, function(acs) { %> 
    <a class="btn"><%= label %></a>
<% }); %>
</script>

我的观点和我相信的循环有问题。有什么线索吗？谢谢！

Answer 1

你可能想做两件事：

1. 调整您提供给模板的数据：

   $(this.el).html(this.template({
       action: this.model.toJSON()
   }));
   

2. 调整模板的内部以使用acs.label而不是label：

   <a class="btn"><%= acs.label %></a>
   

演示：http: //jsfiddle.net/ambiguous/xczBy/

再想一想，我认为您应该使用一个集合而不是单个模型。你想添加这个：

var ActionCollection = Backbone.Collection.extend({
    model: Action
});

然后调整render使用this.collection：

    $(this.el).html(this.template({
        actions: this.collection.toJSON()
    }));

然后像这样开始：

var actions = new ActionCollection(acs);
var actionView = new ActionView({collection: actions});

最后，actions在模板中参考：

<% _.each(actions, function(acs) { %> 

演示：http: //jsfiddle.net/ambiguous/6VeXk/

这将更好地匹配 Backbone 的基于键/值的模型。