1

一連のブール属性を持つバックボーン モデルがあるとします。

Car = Backbone.Model.extend({});

car_one = new Car({
    a_c: true,
    mp3: true,
    gps: false,
    touchscreen: false,
    // etc...
})

これらのブール属性のリストをレンダリングし、true または false に応じてそれらの横にアイコンを表示できるようにしたいと考えています。true の場合、アイコンは緑色のチェックマークになり、それ以外の場合は赤い X アイコンが表示されます。

次の行の何か：

<ul>
<li><img src="tick.png">AC</li>
<li><img src="tick.png">MP3</li>
<li><img src="cross.png">Gps</li>
<li><img src="cross.png">Touch screen</li>
</ul>

テンプレートでそれぞれliをラップする代わりに、これを行うより良い方法はありますか:if statement

<% if (model.a_c === true) { %>
    // show tick...
<% } else { %>
   // show red cross..
<% } %>

このようにレンダリングする必要がある約12のブール属性があります...

4

1 に答える 1

5

テンプレート内から JavaScript 関数にアクセスできます。したがって、何かを入れることができますwindow（つまり、グローバルスコープ）：

window.underscore_helpers = {
    list_of_booleans: function(obj, bools) {
        // 'obj' is the object for the template, 'bools'
        // is an array of field names. Loop through 'bools'
        // and build your HTML...
        return the_html_li_elements;
    }
};

次に、次のvariableオプションを_.template利用する必要があります。

デフォルトでは、テンプレートwithはデータの値をステートメントを介してローカル スコープに配置します。ただし、 variable設定で単一の変数名を指定できます。これにより、テンプレートのレンダリング速度が大幅に向上します。

   _.template("<%= data.hasWith %>", {hasWith: 'no'}, {variable: 'data'});
   => "no"

次に、テンプレートに次のようなものを含めることができます。

<%= underscore_helpers.list_of_booleans(
    json,
    ['a_c', 'mp3', 'gps', 'touchscreen']
) %>

テンプレートを次のように使用します。

var html = _.template($('#t').html(), model.toJSON(), { variable: 'json' });
// or
var tmpl = _.template($('#t').html(), null, { variable: 'json' });
var html = tmpl(model.toJSON());

デモ: http://jsfiddle.net/ambiguous/Yr4m5/

オプションを使用すると、代わりにvariable言う必要がありますが、それはかなりマイナーです。<%= json.attribute %><%= attribute %>

同様のアプローチを使用して、 を<li>1 つずつフォーマットし、より多くの HTML をテンプレートに保持できます。

もう 1 つのオプションはfor、次のようなループをテンプレートにスローすることです。

<script id="t" type="text/x-underscore-template">
    <ul>
        <% var fields = ['a_c', 'mp3', 'gps', 'touchscreen' ] %>
        <% for(var i = 0; i < fields.length; ++i) { %>
            <li class="<%= json[fields[i]] ? 'true' : 'false' %>"><%= fields[i] %></li>
        <% } %>
    </ul>
</script>​​​​​​​​​​​​​​​​​​​​

デモ: http://jsfiddle.net/ambiguous/983ks/

variable: 'json'これもオプションを使用していることに気付くでしょう[]。名前が変数にある場合に、名前でフィールドを取得するために on を使用するために必要です。このアル

于 2012-06-24T23:56:25.773 に答える