タグなし燃えさしコンポーネントのクラス名を割り当てる方法

Question

ユーザtable.js

export default Ember.Component.extend({ 
    tagName: '' 
}); 

ユーザtable.hbs

<table> 
    {{yield}} 
</table> 

使用

{{#users-table class="table table-bordered"}} 
    {{#table-head}} 
     {{#table-row}} 
      {{table-head-cell}} 
      {{table-head-cell}} 
     {{/table-row}} 
    {{/table-head}} 
    {{#table-body}} 
     {{#each users as |user|}} 
      {{#table-row}} 
       {{table-body-cell cellValue=user.name}} 
       {{table-body-cell cellValue=user.age}} 
      {{/table-row}} 
     {{/each}} 
    {{/table-body}} 
    {{#table-foot}} 
     {{#table-row}} 
      {{table-head-cell}} 
      {{table-head-cell}} 
     {{/table-row}} 
    {{/table-foot}} 
{{/users-table}} 

というのは、コンポーネントのtagNameが空（tagName： ''）であること、そのルート要素のクラス名を渡す方法を説明したからです。何か別のものがあります

Answer 1

タグレスコンポーネントは、名前のとおり、タグを持たないため、クラスをスティックすることはできません。また、ハンドラを登録する要素がないため、イベントハンドラもありません。エンバー機能をより有効に活用するように見えること

// user-table.js 
export default Ember.Component.extend({ 
    tagName: 'table' 
}); 

// user-table.hbs 
{{yield}} 

：

コメントで提案、良い軌道に乗っているtagName="table"を使用して、コンポーネントのテンプレートでのみ{{yield}}を持っています代替案よりも。

Answer 2

あなたはそうのようなタグなしのコンポーネント（Ember Twiddle）にクラス名を渡すことができます：タグなしのコンポーネントの良いところは、それがコンポーネントのトップレベルの要素は、あなたが何であるかをテンプレートから明らかであるということである

// user-table.js 
export default Ember.Component.extend({ 
    tagName: '' 
}); 

// user-table.hbs 
<table class="{{class}}"> 
    {{yield}} 
</table> 

// usage 
{{#users-table class="table table-bordered"}}...{{/users-table}} 

javascriptファイルを参照する必要はありません。