我有一个组件,里面有一个子组件列表(用父组件内的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是否应该工作更感兴趣,如果没有,为什么......
非常感谢您的帮助!
答案 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