Question

我知道下划线模板对于替换某种字符串更有用。但是，我可以使用相同的模板机制来根据操作操作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

如何使用underscorejs来操作DOM元素的属性？

1 个答案: