#5 自定义组件根元素

英文原版：https://guides.emberjs.com/v2.14.0/components/customizing-a-components-element/

默认的，每一个组件都被一个<div>元素包裹。如果你通过浏览器的带的开发工具来观察一下DOM结构的话，你会发现你的每个组件渲染后的DOM最外层元素都如下面这样：

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

你可以自定义需要哪种元素来包裹你的组件，同时也可以定义需要这个元素带有哪些class类和属性。

自定义元素

如果不想用div元素，那么你可以通过组件的tagName属性来指定你想要的元素：

app/components/navigation-bar.jsimport Ember from 'ember';export default Ember.Component.extend({  tagName: 'nav'});

app/templates/components/navigation-bar.hbs<ul>  <li>{{#link-to "home"}}Home{{/link-to}}</li>  <li>{{#link-to "about"}}About{{/link-to}}</li></ul>

自定义元素class

你可以在调用组件的时候，用类似于常规的方式来给组件指定class：

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

你同样也可以在组件类中通过className属性来给组件指定class类，该属性是一个字符串数组，所以可以同时指定多个class：

app/components/navigation-bar.jsimport Ember from 'ember';export default Ember.Component.extend({  classNames: ['primary']});

另外，如果你想通过属性来设置class，你可以通过类名绑定来实现。假如你将class与一个boolean属性绑定。那么这个boolean属性的真或假就决定了是否要应用这个class类：

app/components/todo-item.jsimport Ember from 'ember';export default Ember.Component.extend({  classNameBindings: ['isUrgent'],  isUrgent: true});

上面的组件将会得到下面的结果：

<div class="ember-view is-urgent"></div>

如果isUrgent属性变成false，那么is-urgent类就会被去掉。

默认的，boolean属性应用于class类名时通过”-“号连接不同单词。另一个方式，通过冒号”:”来指定你所需要的class类名：

app/components/todo-item.jsimport Ember from 'ember';export default Ember.Component.extend({  classNameBindings: ['isUrgent:urgent'],  isUrgent: true});

这样的话，会得到如下的结果：

<div class="ember-view urgent">

除了当属性为true时应用class之外，你还可以在属性为false的时候添加class类：

app/components/todo-item.jsimport Ember from 'ember';export default Ember.Component.extend({  classNameBindings: ['isEnabled:enabled:disabled'],  isEnabled: false});

这样将会得到下面的渲染结果：

<div class="ember-view disabled">

你同样可以指定当属性为false时添加某class类：

app/components/todo-item.jsimport Ember from 'ember';export default Ember.Component.extend({  classNameBindings: ['isEnabled::disabled'],  isEnabled: false});

渲染效果如下：

<div class="ember-view disabled">

反之，如果isEnabled为true:

<div class="ember-view">

如果被绑定的属性值是一个字符串，那么字符串的值就是class的类名：

app/components/todo-item.jsimport Ember from 'ember';export default Ember.Component.extend({  classNameBindings: ['priority'],  priority: 'highestPriority'});

渲染结果如下：

<div class="ember-view highestPriority">

自定义属性

你可以通过attribubeBindings属性来给组件的根元素绑定属性：

app/components/link-item.jsimport Ember from 'ember';export default Ember.Component.extend({  tagName: 'a',  attributeBindings: ['href'],  href: 'http://emberjs.com'});

你可以给这些属性绑定花名：

app/components/link-item.jsimport Ember from 'ember';export default Ember.Component.extend({  tagName: 'a',  attributeBindings: ['customHref:href'],  customHref: 'http://emberjs.com'});

如果被绑定的属性为null，那么它不会被渲染：

app/components/link-item.jsimport Ember from 'ember';export default Ember.Component.extend({  tagName: 'span',  title: null,  attributeBindings: ['title'],});

当title为null时：

<span class="ember-view">

当title有值，且为”Ember JS”时：

<span class="ember-view" title="Ember JS">

本节完