Как мне обновить мой вид, когда моя модель отсортирована?

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?

Answer 1

Должна быть возможность создать вычисление, которое возвращает отсортированный список:

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;
});

Этот список должен автоматически обновляться при изменении любого атрибута расстояния.