1

私は次のような配列を持っています

  var data = [
            {
                title: 'This is title',
                desc: 'This is desc',
                date: '07:12'
            },
            {
                title: 'This is title2',
                desc: 'This is desc2',
                date: '04:12'
            },
            {
                title: 'This is title3',
                desc: 'This is desc3',
                date: '09:12'
            }
        ];

次に、このデータをループして、underscorejsテンプレートを使用して表示します。動作しないフォローを試みています。

<% _.each(function () { %>
        <li>
            <span class="time"><%= date %></span>
            <p><%= title %></p>
            <p><%= desc %></p>
        </li>
    <% }); %>

上記のコードは何も表示せず、コンソールにもエラーは表示されません。この配列データをループしてすべてのデータを表示するにはどうすればよいですか？

アップデート

ここにもう少しコードがあります。このデータをバックボーンビューから渡します

var Message = Backbone.View.extend({
    className: 'tops',

    render: function () {
        console.log(this.model.toJSON()); //<-- see output for this below
        this.$el.html(_.template(MessageTemplate, this.model.toJSON()));
        return this;
    }
});

console.log（）出力

Object {title: "This is title", desc: "This is desc", date: "07:12"} message.js:6
Object {title: "This is title2", desc: "This is desc2", date: "04:12"} message.js:6
Object {title: "This is title3", desc: "This is desc3", date: "09:12"}

上記のオブジェクトをテンプレートに渡し、それをループして表示します。

4

3 に答える 3

1

ループするオブジェクトを指定する必要があります。

<% _.each(data,function (elem) { %>
    <li>
        <span class="time"><%= elem.date %></span>
        <p><%= elem.title %></p>
        <p><%= elem.desc %></p>
    </li>
<% }); %>

アンダースコアのドキュメントを参照してください。

于 2013-03-15T17:07:41.060 に答える
0

テンプレートに配列を渡すときに、配列に名前を付ける必要があります。

this.$el.html(_.template(MessageTemplate, { 'items': this.model.toJSON() }));

これで、テンプレート内でループしたい配列を参照できます:

<% _.each(items, function (item) { %>
    <li>
        <span class="time"><%= item.date %></span>
        <p><%= item.title %></p>
        <p><%= item.desc %></p>
    </li>
<% }); %>
于 2013-03-15T18:56:41.297 に答える
0

underscorejs.orgから

テンプレート関数を評価するときは、テンプレートの自由変数に対応するプロパティを持つデータ オブジェクトを渡します。1 回限りのものを作成している場合は、テンプレート関数を返す代わりにすぐにレンダリングするために、データ オブジェクトを 2 番目のパラメーターとして template に渡すことができます。

テンプレートで使用するアンダースコア コードは、通常の書き方と同じように機能します。_.each少なくとも 2 つの引数が必要です。1 つ目はイテレータを実行するアイテムのリスト、2 つ目は各アイテムに対して実行するアクションです。

_.each([1, 2, 3], alert);

テンプレートでも同じことを行う必要があります。

<% _.each(dataSet, function (item) { %>
    <li>
        <span class="time"><%= item.date %></span>
        <p><%= item.title %></p>
        <p><%= item.desc %></p>
    </li>
<% }); %>

var rendered_html = _.template(template, {dataSet: data})

に渡された 2 番目のオブジェクト_.templateに のキーが含まれていることに注意してくださいdataSet。渡すキーを_.templateテンプレート コードで使用して、関連付けられた値を参照できます。

ここで例を見ることができます: http://jsbin.com/upugaz/1/edit

于 2013-03-15T17:32:59.997 に答える