Ember.js 包裹余烬构件时传递属性

当包装一个余烬组件时，我如何允许通过一个属性，同时在忽略该属性时返回到内部组件的默认值

例如，以

基本输入

为例，它被

超级输入

包装：

组件/basic input.js

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

{{ input placeholder=placeholder }}

export default Component.extend({});

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

模板/组件/基本输入。hbs

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

{{ input placeholder=placeholder }}

export default Component.extend({});

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

组件/super-input.js

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

{{ input placeholder=placeholder }}

export default Component.extend({});

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

模板/组件/超级输入.hbs

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

{{ input placeholder=placeholder }}

export default Component.extend({});

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

但是当省略属性时，我们如何允许使用

basic input

的默认值

foo

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

---

这就是计算属性发挥作用的地方。可以在内部组件中定义计算特性，并将值作为与父组件不同的特性传递。我的意思如下：

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

---

然后，您将使用此计算属性作为模板中的占位符。请检查以下内容，看看我写了什么。余烬在计算属性特性方面相当强大；只要有可能，我宁愿依靠他们。顺便说一下，您还需要将

占位符

属性传递到

超级输入.hbs中的
基本输入
。这是我在twidle中已经做过的。
这里有一个小问题：
基本输入
组件应该实现所需的功能（即，如果占位符未定义，则使用默认值）。为此，您可以使用建议的alptugd或
{{input placeholder=（如果placeholder placeholder'foo'）}
。感谢您的回复。我希望有一种方法可以做到这一点，而不需要改变内部组件，因为（a）理想情况下，内部组件不知道它们是内部组件，（b）有时内部组件是第三方库；您必须在
超级组件
中定义我提到的计算属性，并将其传递给
内部组件
。你想让我修改这个旋转吗？