Что делает .property()? in function() {}. Свойство()

Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

Я работаю над руководством ToDo для Ember.js, и я не могу понять, как работает этот контроллер. Что означает значение .property()? И как получилось, когда я удаляю "возвращаемое значение"; линейная функциональность остается прежней. Если бы кто-то мог точно объяснить, что происходит здесь, это было бы здорово.

Ссылка на руководство: http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/

Ответ 1

В javascript единственный способ выполнить некоторую обработку при получении или настройке одного свойства использует Object.defineProperty:

Object.defineProperty(person, "b", {
  get : function() { 
    return person.firstName + ' ' + person.surname; 
  },
  set : function(newValue) {
    var names = newValue.split(' '); 
    person.firsname = names[0];
    person.surname = names[1]; 
  },
  enumerable : true,
  configurable : true
});

Но это имеет некоторые недостатки:

Не перекрестный браузер
Не имеет привязки, другими словами, если изменяется firstname или surname, зависимое свойство fullname не изменяется.
Вызов person.name, когда person равен undefined, сделать ошибку, которая будет выбрана
Невозможно вызвать наблюдателей, без дополнительного кода и знать иерархию зависимостей: firstname зависит от fullname, и это может быть зависимость других свойств arghhh!

В связи с этим у Ember есть понятие "свойство", называемое вычисленное свойство.

Он может быть объявлен двумя способами:

foo: Ember.computed(function({
  ...
}).property(dependent keys);

или при использовании (по умолчанию) Ember.ENV.EXTEND_PROTOTYPES = true:

foo: function() {
  ...
}.property(dependent keys);

property(dependent keys), необходимо, потому что он сообщает ember, что является собственностью, которое при изменении изменит свойство.

fullname: function(key, value) {
  // setter
  if (value !== undefined) {
    var names = value.split(' ');
    this.set('firstname', names[0]);
    this.set('surname', names[1]);
  }
  // always return the complete result, so nexts calls to this.get('fullname') will return the cached value  
  return this.get('firstname') + ' ' + this.get('surname');
}.property('firstname', 'surname')

Используя это, у вас есть преимущество:

при изменении firstname или surname на новое значение изменяется fullname.
beforeObserves запускаются до изменения значения, а observes запускаются после изменения значения.
Обновлен любой шаблон, ссылающийся на некоторое свойство.
Более одного вызова person.get('firstname') вернет кешированное значение, сохранив обработку. Вы можете отключить это, используя .property(..).volatile()
Избегайте ошибок null или undefined при доступе к нулевым объектам вроде: controller.get('person.dog.name') возвращает undefined, если человек или собака undefined.

Я надеюсь, что это поможет

Ответ 2

.property() обозначает функцию как вычисленное свойство, поэтому его можно использовать в шаблонах, например, последовательно. Это свойство JavaScript foo? Или это функция foo()? Вычислимые свойства решают эту проблему на всех платформах.

Поля и пути, переданные как аргументы, являются зависимыми ключами. Все вычисляемые свойства в Ember кэшируются по умолчанию. Чтобы узнать, когда вычисляемое свойство нужно перечислить, Ember должен знать, с какими свойствами и путями он зависит. В примере руководства вычисленное свойство fullName зависит от firstName и lastName; Эмбер должен знать, что он может пересчитать fullName, когда любой из них изменится. (Примечание. Вы можете отключить кеширование с помощью .property().volatile().)

Прочтите руководства. Все это описано там.