javascript - Backbone.js：将活动类应用于模板中的活动元素？

Question

我有一个看起来像这样的主干模板：

<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');

但现在我想重构 Backbone，并使用模板。有没有更好的 Backboney 方式，模板中没有四个if语句？

Answer 1

您可以创建按钮数组并在循环中呈现它，例如：

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>
<% }) %>