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';
  })

然后您将使用此计算属性作为模板中的占位符。请检查以下twiddle以查看我在行动中写的内容。 Ember在计算属性特征方面非常强大;我愿意随时随地依赖它们。顺便说一下，您还需要将placeholder属性传递给basic-input中的super-input.hbs。这就是我在旋转中所做的。

包裹Ember组件时传递属性

1 个答案: