Ember.js-组件篇 自定义组件容器元素

Customizing a Component's Elements

默认的，每个组件都被一个

元素包裹。如果你在开始工具中查看元素解构的话，你会发现模版中的HTML是被一个

包裹的，类似于下面这样：

My Component

不过，你可以通过配置来决定你的组件被哪种元素包裹，并且可以配置该元素的属性和类名。

Customizing the Element

若想要替换掉默认的div, 在定义Component的时候，你可以给tagName属性赋值成你想要的元素的字符串标签名.

app/components/navigation-bar.js

importComponentfrom'@ember/component';

export defaultComponent.extend({

tagName: 'nav'

});

app/templates/compnents/navigation-bar.js

{{#link-to"home"}}Home{{/link-to}}

{{#link-to"about"}}About{{/link-to}}

Customing the Element's Class

你可以在调用组件时，给组件的元素指定class名称：

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

也可以在定义组件的时候指定该组件的类名，给classNames属性赋值一个带有若干个class名称的数组即可：

app/components/navigation-bar.js

importComponentfrom'@ember/component';

export defaultComponent.extend({

classNames: ['primary']

});

如果你希望组件的class名称基于某个组件属性，那么你可以通过classNameBindings属性来配置。如果被基于的组件属性是个boolean属性，那么class名称的添加和移除就会依照该组件属性的真值来决定：

app/components/todo-item.js

importComponentfrom'@ember/component';

export defaultComponent.extend({

classNameBindings: ['isUrgent'],

isUrgent:true

});

上面的组件渲染出的DOM将会是这样:

如果isUrgent变成false, 那么is-urgent类名就会被移除.

默认的，ember会把驼峰的属性名转换为横线分隔的类名。不过你可以通过冒号来将组件属性映射到一个class名称上去：

app/components/todo-item.js

importComponentfrom'@ember/component';

export defaultComponent.extend({

classNameBindings: ['isUrgent:urgent'],

isUrgent:true

});

这样的话，渲染出的DOM将会是:

除了可以在被依赖组件属性为true的时候添加class名之外，也可以在属性为false的时候使用class名称：

app/components/todo-item.js

importComponentfrom'@ember/component';

export defaultComponent.extend({

classNameBIndings: ['isEnabled:enabled:disabled'],

isEnabled:false

});

渲染结果：

还可以在组件属性仅为false的时候使用某个class名：

app/components/todo-item.js

importComponentfrom'@ember/component';

export defaultComponent.extend({

classNameBindings: ['isEnabled::disabled'],

isEnabled:false

});

渲染结果：

如果isEnabled属性为true, class 名不会被使用:

如果，被绑定的组件属性是一个字符串，那么该字符串就会被当作class名：

app/components/todo-item.js

importComponentfrom'@ember-component';

export defaultComponent.extend({

classNameBindings: ['priority'],

priority: 'highestPriority'

});

Customizing Attributes

可以参照绑定class类名那样，来给组件的容器元素绑定属性：

app/components/link-item.js

importComponentfrom'@ember-component';

export defaultComponent.extend({

tagName:'a',

attributeBindings: ['href'],

href: 'http://emberjs.com'

});

如果被绑定组件属性值为null, 那么对应的DOM属性不会被渲染：

app/components/link-item.js

importComponentfrom'@ember-component';

export defaultComponent.extend({

tagName:'span',

attributeBindings: ['title'],

title:null

});

渲染结果：

当然，如果title的值为"Ember JS"，那么结果将会是: