Обновление измененных атрибутов с помощью backbone.js - PullRequest
Новая
       10

Обновление измененных атрибутов с помощью backbone.js

15 голосов
/ 16 сентября 2011

Итак, я устанавливаю модель с обновленными атрибутами.

Затем, на мой взгляд, я слушаю событие изменения для этой модели.

Когда это произойдет, я думаю, что я должен использовать model.changedAttributes?Должен ли я передать ему обратный вызов?

Он должен возвращать хэш всех атрибутов, которые были обновлены, или новые?Есть ли способ узнать, какие из них обновлены, а какие - новые?

Как мне выполнить обновление после получения этого хэша с измененными атрибутами?Разобрать объект по типу атрибута или я должен просто использовать слушатели с более высоким разрешением с самого начала?

Спасибо!

Ответы [ 2 ]

31 голосов
/ 16 сентября 2011

Если ваше представление показывает только один атрибут - например, если это флажок, показывающий некоторый логический атрибут вашей модели - вы должны прослушать событие 'change: attribute_name' для этого атрибута, как описано в Магистральные документы .

Если ваше представление более сложное и основано на нескольких атрибутах модели - например, если это представление для элемента списка «Делать», в котором есть элементы «done», «text» и «dueDate», прослушайте ' изменить 'событие. В этом случае вы можете либо обновить все элементы в каждом событии, либо использовать changeAttributes (), чтобы определить, какие элементы необходимо обновить.

Для иллюстрации ...

Обновить атрибуты, используя события «change: attribute_name»:

Этот стиль хорошо работает для простых представлений, где количество отображаемых атрибутов модели составляет <3 или около того. Более того, и код становится немного громоздким. </p> 

model.bind('change:done', function() {
    view.doneElement.checked = model.get('done');
});
model.bind('change:text', function() {
    view.textElement.value = model.get('text');
});
model.bind('change:dueDate', function() {
    view.dueDateElement.value = model.get('dueDate');
});

Обновить все о событиях «изменения»:

Этот стиль хорошо работает для сложных представлений, которые отображают 4 или более атрибутов (количество атрибутов 3/4 является лишь приблизительным ориентиром, основанным главным образом на моем личном мнении). 

model.bind('change', function() {
    view.doneElement.checked = model.get('done');
    view.textElement.value = model.get('text');
    view.dueDateElement.value = model.get('dueDate');
});

Недостатком этого является то, что при любом изменении каждый элемент представления обновляется. Так, например, если человек помечает элемент todo как «выполненный», текст будет перерисован, возможно, потеряв любой выбранный элемент. Иногда такие вещи являются проблемой, иногда нет - вам придется решать, основываясь на том, что именно делает ваш взгляд.

Обновлять только то, что изменилось с момента последнего события 'change':

Это более нюансированная вариация из вышеперечисленного, объединяющая в себе лучшее из обоих подходов. Он обновляет элементы представления, которые необходимо обновить, на основе результатов changeAttributes (). 

model.bind('change', function() {
  var diff = model.changedAttributes();
  for (var att in diff) {
    switch(att) {
      case 'done':
        view.doneElement.checked = model.get('done');
        break;
      case 'text':
        view.textElement.value = model.get('text');
        break;
      case 'dueDate':
        view.dueDateElement.value = model.get('dueDate');
        break;
    }
  }
});

Наконец, я отмечу, что есть еще один вариант, который заключается в том, что представление хранит хэш значений, которые он отображает, и передает его в метод changeAttributes (). Обычно в этом нет необходимости, поэтому я не буду утомлять вас подробностями здесь.

0 голосов
/ 16 сентября 2011

Согласно магистральной документации событие изменения передает модель и коллекцию модели в обработчик события.

Событие запускается ПОСЛЕ того, как происходят изменения, поэтому переданная модель содержит изменения.

Событие «изменение» не позволяет узнать, какие атрибуты были изменены или добавлены.Если вам нужно выполнить действия на основе отдельных атрибутов, используйте события «change: attribute».

...