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",那么结果将会是:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180729G1GE4M00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励