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

无标签组件，如名称所示，没有标签，因此您无法在其上粘贴类。它们也没有事件处理，因为没有元素可以注册处理程序。

评论中的建议处于良好的轨道，使用tagName="table"并且在组件模板中只有{{yield}}：

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

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

这似乎比其他选择更好地利用了Ember功能。

Answer 2

您可以将classNames传递给无标记组件（如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文件。

如何为无标记的ember组件分配类名

2 个答案: