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

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

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

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

Исходный код для примера jsbin


attributes observers ember.js
person St_5    schedule 22.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

Что еще более важно, это просто не лучший вариант использования для наблюдателей. Что вам действительно нужно, так это вычисляемое свойство. См. 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.

person Mike Grassotti    schedule 23.07.2013