#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.js

import 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.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['primary']
});

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

app/components/todo-item.js

import 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.js

import 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.js

import 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.js

import 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.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['priority'],
  priority: 'highestPriority'
});

渲染结果如下：

<div class="ember-view highestPriority">

自定义属性

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

app/components/link-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'a',
  attributeBindings: ['href'],
  href: 'http://emberjs.com'
});

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

app/components/link-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'a',
  attributeBindings: ['customHref:href'],
  customHref: 'http://emberjs.com'
});

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

app/components/link-item.js

import 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">

本节完