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

Question

好的，大家好，我有这个 key 对值数组，我将其用作我的模型:

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();

问题是关于 View 的。如果这是我想要的 View ，如何循环遍历我传递的模型

<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 基于键/值的模型。