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

你可能想要做两件事：

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

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

调整模板的内部部分以使用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的基于键/值的模型。

在下划线js模板中循环

1 个答案: