javascript - Backbone.js:将事件类应用于模板中的事件元素？

Question

我有一个看起来像这样的 Backbone 模板:

<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 语句的情况下，是否有更好的 Backbone 方法？

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