петли в шаблоне подчеркивания JS - PullRequest
Новая
       20

петли в шаблоне подчеркивания JS

22 голосов
/ 24 марта 2012

Хорошо, ребята, поэтому у меня есть этот массив пар ключей, которые я использую в качестве модели: 

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>

Что-то не так с моим взглядом и циклом, который я считаю. Есть какие-нибудь подсказки? Спасибо!

1 Ответ

28 голосов
/ 24 марта 2012

Возможно, вы захотите сделать две вещи:

  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.

...