包装Ember组件时传递属性

Question

当包装一个Ember组件时，如何在忽略该属性的同时回退内部组件的默认值而允许通过该属性？

例如，以basic-input为例，它被super-input包裹：

组件/碱性input.js

export default Component.extend({
  placeholder: "foo"
});

模板/组件/基本-input.hbs

{{ input placeholder=placeholder }}

组件/超input.js

export default Component.extend({});

模板/组件/超input.hbs

<label>
  <span>{{label}}</span>
  {{ basic-input placeholder=placeholder }}
</label>

将placeholder传递给super-input作品

{{super-input label="baz" placeholder="bar"}}

但是当省略该属性时，如何允许使用basic-input的默认值foo ？

{{super-input label="baz"}}

Answer 1

这是计算属性起作用的地方。 您可以在内部组件中定义一个计算属性，然后将值作为与父组件不同的属性传入。 我的意思是…… 如下：

  placeholderInternal: Ember.computed('placeholder', function() {
    // return the value passed from parent component if exists; return the default value otherwise
    return this.get('placeholder') || 'foo';
  })

那么您将使用此计算所得的属性作为模板内的占位符。 请检查下面摆弄 ，看看我在行动中写道。 Ember在计算属性功能方面非常强大。 我宁愿尽可能地依靠它们。 顺便说一句，您还需要将placeholder属性传递给super-input.hbs basic-input 。 这就是我在旋转中所做的。