1

次のようなバックボーン テンプレートがあります。

<script type="text/html" id="template-switchers">
<strong><%= activeViz %></strong>
<button class="btn" data-viz="lists"><i class="icon-list icon-large"></i></button>
<button class="btn" data-viz="atomic"><i class="icon-spinner icon-large"></i></button>
<button class="btn" data-viz="maps"><i class="icon-map-marker icon-large"></i></button>
<button class="btn" data-viz="charts"><i class="icon-bar-chart icon-large"></i></button>
</script>

渡されるactiveVizパラメータはlists、 、atomic、mapsおよびのいずれかですcharts。active私の質問は、適切なボタンにクラスを追加するにはどうすればよいですか?

今日まで、私はこれをjQueryで行ってきました：

$('#viz-switchers button[data-viz="'+ activeViz + '"]').addClass('active');

しかし今、バックボーンのリファクタリングを行い、テンプレートを使用したいと考えています。ifテンプレートに4 つのステートメントを含めずに、Backboney のより良い方法はありますか?

4

1 に答える 1

2

ボタンの配列を作成し、ループでレンダリングできます。例:

var buttons = [{viz:'', icon:''}, {}, {}];

そして、テンプレートのレンダリングボタンで:

<% _.each(buttons, function(button) { %>
    <button class="btn" data-viz="<%= button.viz %>">
        <i class="<%= button.icon %> icon-large <% button.viz === activeViz && print('active') %>"></i>
    </button>
<% }) %>
于 2013-01-22T19:02:23.053 に答える