Question

我有一个CanJS Model.List，我使用EJS模板进行渲染，如下所示：

<% this.each(function(item, index) { %>
    <% if(index < 5 ){ %>
        <li <%= (el) -> el.data("item", item) %> >
            <%= todo.attr('name') %>  (<%= todo.attr('distance') %> miles)
        </li>
    <% } %>
<% }) %>

在我使用Model.findAll加载数据的应用程序中，我迭代所有项目并触发异步调用以更新distance属性，我有一个监听器列表，其中包含对distance的更改然后根据距离对列表进行排序：

$.each(branches, function(i, b) {
    console.log(i, b);
    b.bind('distance', function (x, y, z) {
        console.log("Distance", x, y, z);
        b.save();
        branches.sort();
    });

    // Async call to update distance here...
});

对sort()的调用有效，我有各种console.logs()显示，但我的用户界面没有更新。

我猜我需要排序来触发this.each(...)会注意到的事件。

如何在重新排序Model.List时更新View？

Answer 1

应该可以创建一个返回已排序列表的compute：

var sortedBranches = can.compute(function() {
  var sorted = branches.slice(0);

  Array.prototype.sort.call(sorted, function(first, second) {
    return first.attr('distance') - second.attr('distance');
  });

  return sorted;
});

当任何距离属性发生变化时，此列表应自动更新。

我的模型排序后如何更新我的视图？

1 个答案: