5.5 Components -- Customizing A Compnent's Element

Posted 2020-06-09

一、概述

默认的，每一个组件都基于一个<div>元素。如果你在你的开发者工具中查看一个渲染的组件，你将会看到一个像这样的DOM表示：

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

你可以为你的组件自定义Ember生成元素的类型，包括它的属性和类名，通过创建一个Ember.Component的子类。

二、Customizing the element

使用一个不是div的标签，Ember.Component的子类分配给它一个tagName属性。这个属性可以是任何有效的html5标签名称作为字符串。

app/components/navigation-bar.js

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>

三、Customizing class names

1. 你也可以通过设置它的classNames属性为一个字符串数组来制定组件的元素的类名。

app/components/navigation-bar.js

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

2. 如果你希望通过组件类型来确定类名，你可以使用类名绑定。如果你绑定一个布尔属性，类名将会根据这个值被添加或者被移除：

app/components/todo-item.js

export default Ember.Component.extend({
  classNameBindings: [‘isUrgent‘],
  isUrgent: true
});

这个组件将会被渲染为：

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

如果isUrgent被改为false，然后is-urgent类名会被移除。

3. 默认的，布尔属性的名字被dasherized。你可以通过一个"："来自定义自定义类名：

app/components/todo-item.js

 

export default Ember.Component.extend({
  classNameBindings: [‘isUrgent:urgent‘],
  isUrgent: true
});

 

者将被渲染为：

<div class="ember-view urgent">

4. 除了该值为true时自定义名称之外，你也可以在该值为false时指定一个类名：

app/components/todo-item.js

export default Ember.Component.extend({
  classNameBindings: [‘isEnabled:enabled:disabled‘],
  isEnabled: false
});

这将被渲染为：

<div class="ember-view disabled">

5. 你也可以指定一个类，它仅仅在值为false时被添加：

app/components/todo-item.js

export default Ember.Component.extend({
  classNameBindings: [‘isEnabled::disabled‘],
  isEnabled: false
});

将被渲染为：

<div class="ember-view disabled">

如果isEnabled属性被设置为true，不会添加类名：

<div class="ember-view">

6. 如果被绑定的属性值是一个字符串，这个值将会作为属性名被添加不会有任何更改：

app/components/todo-item.js

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

渲染为：

<div class="ember-view highestPriority">

四、Customizing Attriburtes

你可以绑定属性到代表组件的DOM元素，利用attributeBindings：

app/components/link-item.js

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

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

app/components/link-item.js

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