组件不使用模板

Question

我想扩展 Ember 的文本区域组件。因此，我在 app/components 中创建了一个文件 drop-files-textarea.js，内容如下：

import Ember from 'ember';

export default Ember.TextArea.extend({

// here comes the new behaviour
})

现在我想在它的模板中添加一些东西。因此，我在 app/templates/components 中创建了一个名为 drop-files-textarea.js 的文件，内容如下：

{{yield}}
<p>added text</p>

虽然从未使用过此模板。 Ember Inspector 告诉我它使用了内联模板。

我做错了什么？

Answer 1

使用了模板，但您不会看到任何内容，因为 TextArea 组件使用 tagName: 'textarea' 将组件包装在文本区域 html 元素中，因此您得到：

<textarea>
  <p>added text</p>
  aaaa
</textarea>

您可能希望使用内部的 textarea 组件创建一个新组件，或者根据您的用例使用值属性来设置 textarea 的内容。

您也可以覆盖 tagName，但这样您就看不到文本区域...

export default Ember.TextArea.extend({
  value: 'Content of the text area'
})

Component doesn't use template