对象属性的 Ember 计算属性

Question

我的组件接收一个名为“line”的对象属性和一个名为“name”的字符串属性。

{{field-row line=model name=fieldName}}

线对象有几个属性。以下 Ember 计算属性“值”根据给定的行和名称返回值：

value: Ember.computed('line', function() {
    const line = this.get('line');
    const name = this.get('name');
    return line.get(name);
})

这可行，但是对线对象属性的任何更新都不会自动触发组件模板的刷新。我猜这是因为对“line”对象的引用保持不变，而其属性内容发生了变化。由于事先无法知道属性的名称，所以我尝试了这个，但它也不起作用：

value: Ember.computed('line.@each', function() {
    const line = this.get('line');
    const name = this.get('name');
    return line.get(name);
})

有什么想法吗？

Answer 1

编辑：以下内容曾经可以工作，但不是框架作者的意图。不要使用set，而是使用defineProperty。看到这个issue

好吧，如果你提前知道所有可能的属性，你可以使用大括号语法：

value: Ember.computed('line.{length,width}', function(){
    var line = this.get('line');
    var name = this.get('name');
    return line.get(name);
  }) 

正如JSBIN 演示的那样

但是，如果您想要真正的动态行为：

export default Ember.Component.extend({

  value:null,
  initialize: function(){
    var name = this.get('name');
    var key = "line." + name;
    this.set('value', Ember.computed(key, function(){
    var line = this.get('line');
    var name = this.get('name');
    return line.get(name);
  }));
  }.on('init')

});

JSBIN numero dos