javascript - 随时更改 underscore.js 模板变量

Question

我想更新模板变量的值，以便在用户单击它时发生变化，从而改变页面上的数据。

<script type="text/template" id="graph-template">
<% _.each(results, function(results) { %>
     <ul class="barGraph">
        <li>
            <div class="left"><p><%= results.title %></p></div>
            <div class="right">

            <!-- THIS SHOULD CHANGE TO results.views if I statement is true without reloading data -->
            <span class="bar" style="width: <%= Math.floor(results.totalCount / 1000) %>%;">
                Total Views: <%= results.totalCount %>
            </span>
            <!-- THIS SHOULD CHANGE TO results.views if I statement is true -->

            </div>
        </li>
     </ul>
<% }); %>
</script>


$('input[name="views"]').change(function(e) { 
    if( $(this).val() == 'total') {
        resultsTemplating(sortByCount);
    } else {
        resultsTemplating(sortByAverage);
    }
});

Answer 1

在这种情况下，我会为结果集合中的每个项目添加一些 ID，并根据它们更新项目。并且在进行任何更改后，应使用新数据更新模板并再次插入。

这是一个带有click的例子，但是你可以改变它

var results = [
    { id: 1, title: 'Some title', totalCount: 2},
    { id: 2 ,title: 'Another title', totalCount: 3},
    { id: 3, title: 'Another title', totalCount: 4}
];

var compiled = _.template($('#graph-template').html());
$('#app').html(compiled({results: results}));

$('body').on('click', '.js-value', function() {
    var $el = $(this);
    _.each(results, function(item) {
        if (item.id == $el.data('index')) {
            item.totalCount += +$el.attr('value');
        }
    });
    results = _.sortBy(results, 'totalCount');
    $('#app').html(compiled({results: results}));
});

看看 fiddle http://jsfiddle.net/shurshilin/kxk1Lhkf/1/

如果您有任何问题，请随时提出，因为我可能不正确地理解您的问题。