ember*3.5 自定义组件元素

默认情况下，每个组件都有<div>元素支持。如果您要查看开发人员工具中的渲染组件，你会看到一个类似于一下内容的DOM表示：

<div id="ember180" class="ember-view">
    <h1>My Component</h1>
</div>

你可以自定义Ember为你的组件生成什么类型的元素，包括其属性和类名，通过在Javascript中创建Component的子类。

自定义元素

要使用除<div>之外的标记，请将Component子类化，并为其指定Tagname属性。此属性可以将任何有效的HTML5标记名称作为字符串。

//in component.js
import dafault Component.extend({
    tagName: 'nav',
})

//in component.hbs
<ul>
    <li>{{#link-to 'home'}}Home{{/link-to}}</li>
    <li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>

自定义元素的类

你可以在调用时指定组件元素的类，就像使用常规HTML元素一样：

{{navigation-bar class="primary"}}

你还可以通过将其classNames属性设置为字符串数组的方式来指定哪些类名被应用于组件元素：

// in component.js
export default.Component({
    classNames: ['primary'],
})

如果你希望类名由组件的属性确定，你可以使用类名绑定。如果你绑定了一个Boolean属性，类名将根据布尔值被增加或删除：

//in component.js
export default Component.extend({
    classNameBindings: ['isUrgent'],
    isUrgent: true,
})

这个组件将像下面这样渲染：

<div class='ember-view is-urgent'><div>

如果isUrgent变成了false,is-Urgent类名将被删除。

默认情况下，Boolean属性的名称是classNameBinding绑定的值。你可以通过冒号分隔它来自定义应用的类名：

export dafault Component.extend({
    classNameBindings: ['isUrgent: urgent'],
    isUrgent: true,
})

它会渲染这样的HTML：

<div class='ember-view urgent'></div>

你还可以通过声明classNameBindings来指定一个只应在属性为false时添加的类：

//in component.js
export dafault Component.extend({
    classNameBindings: ['isEnabled::disabled'],
    isEnabled: false,
})

它将会渲染这样的HTML：

<div class='ember-view disabled'>

如果disabled属性设置为true,将不会添加类名：

<div class='ember-view'>

如果bound属性的值是一个字符串，那么该值将作为类名添加而不进行修改：

// in component.js
classNameBindings: ['priority'],
priority: 'highestPriority',

它将会渲染出下面的HTML：

<div class='ember-view highestPriority'>

自定义属性

你可以使用attributeBindingd将属性绑定到表示组件的DOM元素：

//in component.js
export default Component.extend({
    tagName: 'a',
    attributeBindings: ['href'],
    
    href: 'wordlu.github.io'
});

你也可以将这些attributes绑定到不同命名的属性：

//in component.js
    export default Component.extend ({
        tagName: 'a',
        attributeBindings: ['customHref:href'],
        
        customHref: 'wordlu.github.io',
    })

如果attributes的值为null，它将不会被渲染：

//in component.js
export default Component.extend({
    tagName: 'a',
    attributeBindings: ['title'],
    
    title: null,
})

当没有title传递给组件时，将渲染以下HTML：

<span class='ember-view'>

当命名为Ember JS的title传递给组件时，HTML如下：

<soan class='ember-view' title='Ember JS'>

ember*3.5 自定义组件元素

自定义元素

自定义元素的类

自定义属性

推荐阅读更多精彩内容