包裝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 。 這就是我在旋轉中所做的。