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

У меня есть 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?


person Greg B    schedule 09.07.2014    source источник


Ответы (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;
});

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

person Daff    schedule 09.07.2014