Question

我有一个组件，我在其中观察模型中的属性，并且模型在控制器设置中作为控制器属性＆＃39;模型提供给控制器。模型具有属性年龄，工资，等级。组件中的属性将由用户输入。

该组件将被称为：

{{ui-slider prop="age"}}

OR

{{ui-slider prop="salary"}}

这不是完整的组件，但它解释了我的问题.. 组件是：

App.UiSliderComponent = Ember.Component.extend({

prop:function(){
    return this.get('prop');
}.property('prop'),

modelPropertyObserver:function(){
    console.log("property is "+this.get('targetObject.model').get(this.get('prop'));
}.observes('targetObject.model.'+this.get('prop')),

didInsertElement:function(){
   console.log("Element inserted");
}

})

这不起作用。当我观察到诸如.observes('targetObject.model.age')之类的属性时，它可以正常工作。

现在它显示了cori_component.js:29 Uncaught TypeError: this.get is not a function

我也试过了.observes('targetObject.model.'+this.prop)虽然它没有显示任何错误，但观察者没有工作。

如何连接＆＃39; prop＆＃39;对观察者的财产？
或者是否有任何方法可以连接组件内的字符串，然后将其替换为观察者。

Answer 1

Innstead你可以试试，

{{ui-slider prop=model.age}}

和

modelPropertyObserver: Ember.observer('prop', function() {
    console.log("modelPropertyObserver");
})

我认为下面的内容是不可接受的。

.observes('targetObject.model.'+this.get('prop'))

Answer 2

您可以通过重写init并在那里设置属性来尝试以下操作（我已经这样做了，以获得动态计算属性）。我正在使用Babel来获得ES2015功能（例如...arguments和字符串插值））

init() {
this._super(...arguments);
this.set('value', Ember.computed(`model.${this.get('attribute')}`, function() {
  return this.get(`model.${this.get('attribute')}`);
}));
}

我在文档中假设您可以将Ember.computed替换为Ember.observer（并替换相应的方法签名 - 下面的代码段copied from the documentation）

Ember.observer('value', function(sender, key, value, rev) {
// Executes whenever the "value" property changes
// See the addObserver method for more information about the callback arguments
}

在观察者中观察到的属性中连接字符串

2 个答案: