如何分配的无标签烬组件的类名

-2

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：''），如何传递该根元素的类名称。有没有其他的选择

来源

2016-08-22 Lokesh Cherukuri

为什么不试试'{{users-table class =“table”tagName ='table'}}'......有什么东西阻止你？ – kumkanillam

在这种情况下，模板文件将保留为{{yield}}。代码看起来不错 –

你不需要在你的情况下保留'{{yield}}'。请记住，如果你使用'tagName =''''那么你将不会得到'这个$'' – kumkanillam

无标记组件，如名称所示，没有标签，所以你不能在它们上面粘贴类。他们也没有事件处理，因为没有注册处理程序的元素。

的意见的建议是一个很好的赛道，分量模板使用tagName="table"和只有一个{{yield}}：

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

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

这似乎更好地利用灰烬功能比替代品。

来源

2016-08-22 09:52:35 locks

你可以通过类名来无标签的部件，像这样（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文件。

来源

2017-01-09 15:32:50

如何分配的无标签烬组件的类名

回答

相关问题