javascript - 如何使用 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