Backbone.js：將活動類應用於模板中的活動元素？

我有一個主幹模板，看起來像這樣：Backbone.js：將活動類應用於模板中的活動元素？

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

但現在我想重構爲骨幹，並使用模板。有沒有更好的Backboney方法，但模板中沒有四個if語句？

來源

2013-01-22 Richard

您可以創建按鈕的排列，呈現在循環如：

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

來源

2013-01-22 19:02:23

IMO這是正確的想法，因爲你描述該模型將被輸入到模板中。我唯一的建議是將循環（_.each）保留在render方法中，並將模板保留爲標記。更好地分離問題並更容易維護。/2C –

Backbone.js：將活動類應用於模板中的活動元素？

回答

相關問題