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，并使用模板。是否有更好的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>
<% }) %>

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

1 个答案: