web-dev-qa-db-ja.com

アンダースコアjsテンプレートのループ

わかりましたので、モデルとして使用しているキーペアの値の配列があります。

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>

私の見解と私が信じるループには何か問題があります。手がかりはありますか？ありがとう！

javascriptbackbone.jsunderscore.jsunderscore.js-templating
22
climboid

おそらく2つのことをしたいと思うでしょう。

  1. テンプレートに提供するデータを調整します。

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

  2. labelの代わりにacs.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のキー/値ベースのモデルによりよく一致します。

28
mu is too short