ember*3.5 自定义组件元素

默认情况下，每个组件都有

元素支持。如果您要查看开发人员工具中的渲染组件，你会看到一个类似于一下内容的DOM表示：

    
My Component

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

自定义元素

要使用除

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

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

//in component.hbs

    
{{#link-to 'home'}}Home{{/link-to}}
    
{{#link-to 'about'}}About{{/link-to}}

自定义元素的类

你可以在调用时指定组件元素的类，就像使用常规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,
})

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

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

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

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

它会渲染这样的HTML：

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

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

它将会渲染这样的HTML：

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

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

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

它将会渲染出下面的HTML：

自定义属性

你可以使用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：

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