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进行重构，并使用模板。有没有一种更好的方法，不用在模板中有四条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>
<% }) %>