Ember не срабатывает наблюдатель после поля изменения

Question

Когда я изменить поле, из которого установлен наблюдателя, наблюдатель не запускать

App = Ember.Application.create(); 


App.Meeting = Em.Object.extend({ 
    id: null, 
    name: null, 
    proposes:{choice:5} 
}); 

App.Meeting.reopen({ 
    proposedChanged: function() { 
     var proposes = this.get('proposes'); 
     console.log(proposes); 
     Ember.set(proposes, 'yesProcent', 'width:'+proposes.choice+'%'); 
     //this.set('proposes','width:'+10+'%'); 
     console.log(this); 
    }.observes('proposes') 
}); 

Ember.MyButton = Ember.Button.extend({ 
    click:function(){ 

     var meeting = this.get("meeting"); 

     meeting.proposes.choice = 10; 

     Ember.set(meeting.proposes, 'choice', 10); 
     meeting.set('proposes',meeting.proposes); 
     console.log(meeting.proposes); 
    } 
}); 

App.meetingsController = Ember.ArrayController.create({ 
    content: [], 
    loadList: function(){ 

     var me = this; 

     var m = App.Meeting.create(); 
     m.setProperties({ 
      id : 1, 
      name : 'Test', 
      proposes: {choice:5} 
     }); 

     me.pushObject(m); 

    } 
}); 

App.meetingsController.loadList(); 

С моей prodject имеет ailike кода и когда атрибут огня наблюдатель (которые изменяются в наблюдателе) не изменяются слишком (для этого примера я имею в виду атрибут yesProcent). Почему?

Источник примеру jsbin

Answer 1

Есть несколько вещей в игре здесь. Во-первых, наблюдатели Эмбер не будут срабатывать, когда свойства устанавливаются непосредственно как:

meeting.proposes.choice = 10; 
//Instead, use set like this: 
meeting.set('proposes.choice',10); 

Что еще более важно, это просто не очень хорошее дело для наблюдателей. То, что вы действительно хотите, вычисляемый property.See http://emberjs.com/guides/object-model/what-do-i-use-when/

App = Ember.Application.create(); 

App.Meeting = Em.Object.extend({ 
    id: null, 
    name: null, 
    proposes: {choice:5}, 
    yesProcent: function() { 
     return 'width:' + this.get('proposes.choice') + '%'; 
    }.property('proposes.choice') 
}); 

Ember.MyButton = Ember.Button.extend({ 
    click:function(){ 
    this.incrementProperty('meeting.proposes.choice'); 
    } 
}); 

App.meetingsController = Ember.ArrayController.create({ 
    content: [], 
    loadList: function(){ 
     var m = App.Meeting.create({ 
      id : 1, 
      name : 'Test', 
      proposes: {choice:25} 
     }); 
     this.pushObject(m); 
    } 
}); 

App.meetingsController.loadList(); 

См рабочий пример здесь: http://jsbin.com/avebok/5/edit