5.5 Components -- Customizing A Compnent's Element
一、概述
默认的,每一个组件都基于一个<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"
});
5.5 Components -- Customizing A Compnent's Element的更多相关文章
- Ember.js学习教程 -- 目录
写在前面的话: 公司的新项目需要用到Ember.js,版本为v1.13.0.由于网上关于Ember的资料非常少,所以只有硬着头皮看官网的Guides,为了加深印象和方便以后查阅就用自己拙劣的英语水平把 ...
- 5.2 Components — Defining A Component
一.概述 1. 为了定义一个组件,创建一个模板,它的名字以components/开头.为了定义一个新组件{{blog-post}},例如,创建一个components/blog-post模板. 2.注 ...
- (八)Knockout 组件 Components
概述 :组件和自定义元素 Components 是将UI代码组织成自包含的.可重用的块的一种强大而干净的方法.他们: -可以表示单个控件/窗口小部件或应用程序的整个部分 -包含它们自己的视图,并且通常 ...
- 七、Vue组件库:Element、Swiper(轮播专用组件)
一.vue的Element组件库 官网:https://element.eleme.cn/#/zh-CN 1.1安装 推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S 或 ...
- [asp.net core] Tag Helpers 简介(转)
原文地址 https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro What are Tag Helpers? ...
- KnockoutJS 3.X API 第六章 组件(4) 自定义元素
自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...
- jquery easyui 1.4.1 API( CHM版)
ChangeLog Bug The combogrid has different height than other combo components. fixed. datagrid: The r ...
- Tomcat Clustering - A Step By Step Guide --转载
Tomcat Clustering - A Step By Step Guide Apache Tomcat is a great performer on its own, but if you'r ...
- JAXB - The Object Factory
Usually hidden in the middle of the list of the classes derived from the types defined in an XML sch ...
随机推荐
- mybatis由浅入深day01_5mybatis开发dao的方法(5.1SqlSession使用范围_5.2原始dao开发方法)
5 mybatis开发dao的方法 5.1 SqlSession使用范围 5.1.1 SqlSessionFactoryBuilder 通过SqlSessionFactoryBuilder创建会话工厂 ...
- day11<Java开发工具&常见对象>
Java开发工具(常见开发工具介绍) Java开发工具(Eclipse中HelloWorld案例以及汉化) Java开发工具(Eclipse的视窗和视图概述) Java开发工具(Eclipse工作空间 ...
- POJ 1947 Rebuilding Road(树形DP)
Description The cows have reconstructed Farmer John's farm, with its N barns (1 <= N <= 150, n ...
- swift - UISegmentedControl 和 UIWebView 的用法
这两个用法比较简单: 具体代码如下: 一.UISegmentedControl 1.UISegmentedControl的声明 var segment = UISegmentedControl() 2 ...
- shell基础篇(九)函数
函数可以让我们将一个复杂功能划分成若干模块,让程序结构更加清晰,代码重复利用率更高.像其他编程语言一样,Shell 也支持函数.Shell 函数必须先定义后使用1. Shell 函数的定义格式如下: ...
- IT教程视频
声明:以下视频均来自与互联网各个高级培训机构内部视频,我们能保证大部分的链接均可用.但不能保证所有的视频内容都是最新的.如果想要实时跟进各个培训机构的内部视频建议您关注微信公众号(BjieCoder) ...
- MVC Route路由
由于某些原因,需要默认区域,所以需要对路由进行设置 具体实现如下: using System.Web; using System.Web.Mvc; using System.Web.Routing; ...
- JavaScript DOM 对象
JavaScript DOM 对象 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...
- Js跨域、父级窗口执行JS赋值、取值,更改元素
网站域名: A:http://www.xxoo.com/a.html B:http://www.aabb.com/b.html B网站嵌套与A网站(A的a中的Iframe指向B中的b)b要让父级a页面 ...
- java高级---->Thread之Semaphore的使用
Semaphore也是一个线程同步的辅助类,可以维护当前访问自身的线程个数,并提供了同步机制.今天我们就学习一下Semaphore的用法. java中多线程Semaphore的使用 关于Semapho ...