Question

I have a Backbone template that looks like this:

<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>

The activeViz parameter passed in can be any of lists, atomic, maps and charts. My question is: how do I add an active class to the appropriate button?

To date, I’ve been doing this with jQuery:

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

But now I want to refactor for Backbone, and use templates. Is there a better, Backboney way, without having four if statements in the template?

Answer 1

You can create array of buttons and render it in loop e.g:

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

And In your template render buttons:

<% _.each(buttons, function(button) { %>
    <button class="btn" data-viz="<%= button.viz %>">
        <i class="<%= button.icon %> icon-large <% button.viz === activeViz && print('active') %>"></i>
    </button>
<% }) %>