如何使用underscorejs來操作DOM元素的屬性？

Question

我知道underscorejs模板更有用來替換某種字符串。但是，我可以使用相同的模板機制來基於操作來操作DOM的屬性值嗎？

比方說，我有一張桌子（kendogrid），我想動態改變一行的背景顏色（下拉菜單將顯示給最終用戶）。我用jQuery來改變背景。但我的老闆堅持要我使用underscorejs的模板。我有點卡住了。

幫助??任何人？？

Answer 1

我的猜測是，他們希望您每次更改數據並呈現模板時都會發生一個更改DOM狀態的事件。

HTML：

<div id="container"></div> 
<select id="highlight-choice"> 
    <option value="0">first</option> 
    <option value="1" selected>second</option> 
</select> 

<script id="gridtemplate" type="text/template"> 
    <table id="kendogrid"> 
     <% _.each(rows, function(row) { %> 
      <tr style="background: <%= row.background %>;"> 
       <% _.each(row.columns, function(column) { %> 
        <td><%= column %><td> 
       <% });%> 
      </tr> 
     <% }); %> 
    </table> 
</script> 

的Javascript：（後DOM準備某些部分必須運行）

var compile = _.template(document.getElementById('gridtemplate').innerHTML); 

var data = { 
    rows: [ 
     { 
      columns: [1,2], 
      background: '#fff' 
     }, 
     { 
      columns: [3,4], 
      background: '#ff0' 
     } 
    ] 
}; 

function render() { 
    document.getElementById('container').innerHTML = compile(data); 
} 

render(); 

document.getElementById('highlight-choice').addEventListener('change', function() { 
    _.each(data.rows, function(row) { 
     row.background = '#fff'; 
    }); 
    data.rows[this.value].background = '#ff0'; 
    render(); 
}); 

jsFiddle