带有动态计算别名的 Ember 绑定答案

【问题标题】：Ember binding with dynamic computed alias带有动态计算别名的 Ember 绑定
【发布时间】：2015-09-17 09:55:49
【问题描述】：

我有一个组件，它提供模型的每条记录（“数据”），以及定义要使用的记录属性的“元”信息，并将其呈现到表中。在组件中，我尝试将底层记录属性绑定到每个 UI 元素 {{tdVal}}：

tdVal : function(){

    return Ember.computed.alias('data.' + this.get('meta').get('field'));

}.property()

不幸的是，这只会在 UI 中呈现 [object object]。为了比较，以下内容正确呈现了所有项目，但显然没有绑定：

tdVal : function(){

    return this.get('data').get(this.get('details').get('field'));

}.property()

我是否以完全错误的方式处理这个问题？任何帮助将不胜感激。

更新

为了清楚起见，如果我绑定到文字键而不是从元信息派生的属性键，我仍然会遇到完全相同的问题，所以我认为使用派生键不是问题：

tdVal : function(){

    return Ember.computed.alias('data.partner_id');

}.property()

更新

如果我将针对组件的绑定设置为属性而不是分配给该属性的函数，那么它可以工作。问题是我不能这样做，因为别名的键需要派生而不是文字：

export default Ember.Component.extend({    
    tdVal : Ember.computed.alias('data.partner_id')
})

【问题讨论】：

标签： ember.js

【解决方案1】：

我找到了解决方案。我认为由于时间问题从函数返回时计算的别名失败。相反，我将它添加到 init()

export default Ember.Component.extend({

tagName : '',

init: function(){

    this._super();

    this.set('tdVal', Ember.computed.alias('data.' + this.get('details').get('field')));
}

});

这已经成功了，一切都按原样呈现，对 UI 的更新反映在模型中，反之亦然。

【讨论】：

【解决方案2】：

第二种方式看起来不错。它没有绑定，因为您没有提供要绑定的属性：

tdVal : function(key, value){

    var path = 'data.' + this.get('details.field');

    if (value)    
        this.set(path, value);

    return this.get(path);

}.property('data', 'details.field')

【讨论】：

感谢您的回复。不幸的是，第二种方式不适合，因为它是一个计算属性，我需要一个双向绑定（别名）。第二种方法也行不通，因为你不能这样做： .property('data' + this.get('details.field'))
我更改了答案中的代码以提供双向绑定。对于计算密钥设置观察者，您可以使用emberjs.com/api/classes/Ember.Component.html#method_addObserver
谢谢您，非常感谢您抽出宝贵时间提供帮助。该解决方案有效 - 良好的通话。我还为答案添加了另一个解决方案。我想知道哪个最好？