EmberJS notifyPropertyChange没有让它成为观察者?

时间:2014-08-26 18:45:45

标签: ember.js

我有一个组件,里面有一个子组件列表(用父组件内的yield绘制):

parent-component
  for item in items
    child-component item=item childProperty=parentProperty

在子组件内部,我在" childProperty"上有一个观察者,它可以在parentProperty更改时正确触发。问题是我想在物业没有实际改变的时候触发观察者。

要做到这一点,在我的父组件中,我有:

this.notifyPropertyChange('parentProperty')

出于某种原因,这不是对子组件的影响。这是一个JS bin显示:

http://emberjs.jsbin.com/caxedatogazo/1/edit

虽然我很乐意更多地讨论我的用例,但我对JS bin是否应该工作更感兴趣,如果没有,为什么......

非常感谢您的帮助!

2 个答案:

答案 0 :(得分:8)

当您在控制器上调用notifyPropertyChange时,只有在控制器中注册的观察者才会收到有关属性更改的通知。

在您的情况下,观察者位于组件控制器内,而不是调用notifyPropertyChange的父控制器。

有一种hacky方法可以确保组件控制器收到有关属性更改的通知。这可以通过将以下方法添加到组件来完成。

didInsertElement: function() {
  var controller = this.get('targetObject'); 
  controller.addObserver('foo', this, this.onDataChange);
},

我们正在做的是,获取父控制器,为父控制器注册foo的观察者。

这是同样的小提琴:http://emberjs.jsbin.com/rajojufibesa/1/edit

希望这有帮助!

答案 1 :(得分:1)

我扩展了ViRa的答案。 下面的代码将允许您的组件在控制器上使用不同的属性键传递数据。例如,如果控制器具有属性data或想要使用路由器中的model,则属性键无关紧要。该组件不需要具有在控制器上始终使用的固定属性键,例如“foo”,而是将动态地找到它。

didInsertElement: function() {
    var controller = this.get('targetObject');
    // Find the key on the controller for the data passed to this component
    // See http://stackoverflow.com/a/9907509/2578205
    var propertyKey;
    var data = this.get('data');
    for ( var prop in controller ) {
        if ( controller.hasOwnProperty( prop ) ) {
             if ( controller[ prop ] === data ) {
               propertyKey = prop;
               break;
             }
        }
    }
    if (Ember.isEmpty(propertyKey)) {
      console.log('Could not find propertyKey', data);
    } else {
      console.log('Found key!', propertyKey, data);
      controller.addObserver(propertyKey, this, this.onDataChange);
    }
  }

更新:这是一个JSBin:http://emberjs.jsbin.com/nafapo/edit?console,output