如何为无标记成员组件分配类名

how to assign class names for tagless ember components

本文关键字：组件 分配 成员      更新时间：2023-09-26

用户表.js

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

用户表.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:"(，因此如何传递该根元素的类名。有其他吗

顾名思义，无标记组件没有标记，所以不能在它们上粘贴类。它们也没有事件处理，因为没有元素可以在上面注册处理程序

评论中的建议很好，使用tagName="table"，并且组件模板中只有{{yield}}：

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


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

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

您可以将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文件。

相关文章：