Question

我有一个组件{{upload-image src=foo.bar}}。如果foo.bar是假的，我想给它一个不同的值。我在init中设置了这样的值：

import Ember from 'ember';

export default Ember.Component.extend({
  attributeBindings: ['src'],
  tagName: 'img',

  init: function(){
    this.set('src', 'http://www.placecage.com/40/40');
    this._super();
    this.set('src', 'http://www.placecage.com/40/40');
  },

  click: function(){
    console.log(this.get('src'));
  }
});

然而它不起作用。图像将使用我传入的值进行渲染，而不是新图像。当我点击图像时，它会记录住盘图像。相反，如果我稍后尝试在didInsertElement上覆盖它，它会按预期工作：

import Ember from 'ember';

export default Ember.Component.extend({
  attributeBindings: ['src'],
  tagName: 'img',

  didInsertElement: function(){
    this.set('src', 'http://www.placecage.com/40/40');
  },

  click: function(){
    console.log(this.get('src'));
  }
});

渲染出来似乎有点傻，只有这样才能改变导致（我假设）重新渲染的值。检查src是否为假并将其设置为默认值并获得预期结果的适当位置是什么？

Answer 1

在Ember 1.13中，您可以在

中执行此操作

attributeBindings: ['src:src'],

didInitAttrs() {
  this.set('src', <new value>);
}

或者您可以在组件外部执行虚假逻辑并将其传入。

Answer 2

我会创建另一个定义如下的属性：

effectiveSrc: function() {
    return this.get('src') || 'http://www.placecage.com/40/40';
}.property('src')

然后在逻辑和模板中使用effectiveSrc。

另一种方法是给src一个默认值：

src: 'http://www.placecage.com/40/40'

然后在调用您的模板时，如果其值为假，请省略src，例如

{{#if foo.bar}}
  {{upload-image src=foo.bar}}
{{else}}
  {{upload-image}}
{{/if}}

以下可能也有效，需要尝试一下：

{{upload-image src=(if foo.bar foo.bar)}}

Answer 3

使用ember 2.x（我已经使用2.4.2,2.4.3和2.5.0进行了测试），我已经通过torazaburro提到的默认功能实现了此功能：

export default Ember.Component.extend({
  attributeBindings: ['src'],
  tagName: 'img',
  src: 'http://www.placecage.com/40/40',
  click() {
    console.log(this.get('src'));
  }
}

模板：

{{upload-image src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png"}}

{{upload-image}}

Twiddle to test it

Answer 4

在Github https://github.com/emberjs/ember.js/issues/11637上有一个未解决的问题，他们似乎在说我不应该以这种方式使用双向数据绑定来设置值。

我想我应该从计算属性中读取它，并从中设置默认值。

我应该在哪里设置带有attributeBindings的组件的默认值？

4 个答案: