默认情况下,每个组件都有<div>
元素支持。如果您要查看开发人员工具中的渲染组件,你会看到一个类似于一下内容的DOM表示:
<div id="ember180" class="ember-view">
<h1>My Component</h1>
</div>
复制代码
你可以自定义Ember为你的组件生成什么类型的元素,包括其属性和类名,通过在Javascript中创建Component
的子类。
自定义元素
要使用除<div>
之外的标记,请将Component
子类化,并为其指定Tagname
属性。此属性可以将任何有效的HTML5标记名称作为字符串。
//in component.js
import dafault Component.extend({
tagName: 'nav',
})
复制代码
//in component.hbs
<ul>
<li>{{#link-to 'home'}}Home{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>
复制代码
自定义元素的类
你可以在调用时指定组件元素的类,就像使用常规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,
})
复制代码
这个组件将像下面这样渲染:
<div class='ember-view is-urgent'><div>
复制代码
如果isUrgent
变成了false
,is-Urgent
类名将被删除。
默认情况下,Boolean
属性的名称是classNameBinding绑定的值。你可以通过冒号分隔它来自定义应用的类名:
export dafault Component.extend({
classNameBindings: ['isUrgent: urgent'],
isUrgent: true,
})
复制代码
它会渲染这样的HTML:
<div class='ember-view urgent'></div>
复制代码
你还可以通过声明classNameBindings
来指定一个只应在属性为false
时添加的类:
//in component.js
export dafault Component.extend({
classNameBindings: ['isEnabled::disabled'],
isEnabled: false,
})
复制代码
它将会渲染这样的HTML:
<div class='ember-view disabled'>
复制代码
如果disabled
属性设置为true
,将不会添加类名:
<div class='ember-view'>
复制代码
如果bound属性的值是一个字符串,那么该值将作为类名添加而不进行修改:
// in component.js
classNameBindings: ['priority'],
priority: 'highestPriority',
复制代码
它将会渲染出下面的HTML:
<div class='ember-view highestPriority'>
复制代码
自定义属性
你可以使用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:
<span class='ember-view'>
复制代码
当命名为Ember JS
的title传递给组件时,HTML如下:
<soan class='ember-view' title='Ember JS'>复制代码