英文原文：http://emberjs.com/guides/views/customizing-a-views-element

视图在页面上表现为一个单一的DOM元素。通过修改tagName属性，可以改变视图生成的元素的类型。

  1. App.MyView = Ember.View.extend({
  2.   tagName: 'span'
  3. });

另外，还可以通过设置一个字符串数组到classNames属性，来设置视图要应用的样式列表。

  1. App.MyView = Ember.View.extend({
  2.   classNames: ['my-view']
  3. });

如果需要通过视图的属性来决定使用什么样式，那么可以采用样式名绑定。如果绑定了一个布尔属性，那么是否应用样式则有该属性的值来决定：

  1. App.MyView = Ember.View.extend({
  2.   classNameBindings: ['isUrgent'],
  3.   isUrgent: true
  4. });

上述的代码将会把视图渲染为：

  1. <div class="ember-view is-urgent">

如果isUrgent变为false，那么is-urgent样式将被删除。

默认情况下，布尔属性的名称会采用中划线分割的方式命名。通过使用冒号来定界，可以自定义样式的名称。

  1. App.MyView = Ember.View.extend({
  2.   classNameBindings: ['isUrgent:urgent'],
  3.   isUrgent: true
  4. });

上述代码将渲染出如下的HTML：

  1. <div class="ember-view urgent">

不仅可以在属性值为true的时候自定义样式名，同样也可以指定属性值为false的时候使用的样式名：

  1. App.MyView = Ember.View.extend({
  2.   classNameBindings: ['isEnabled:enabled:disabled'],
  3.   isEnabled: false
  4. });

上述代码将渲染出如下的HTML：

  1. <div class="ember-view disabled">

另外，通过按照如下的方式声明classNameBindings，来指定只在属性为false的要使用的样式：

  1. App.MyView = Ember.View.extend({
  2.   classNameBindings: ['isEnabled::disabled'],
  3.   isEnabled: false
  4. });

上述代码将渲染出如下的HTML：

  1. <div class="ember-view disabled">

如果isEnabled属性被设置为true，那么不会添加任何样式：

  1. <div class="ember-view">

如果绑定的值是字符串，那么该值会直接作为样式名添加到视图：

  1. App.MyView = Ember.View.extend({
  2.   classNameBindings: ['priority'],
  3.   priority: 'highestPriority'
  4. });

上述代码将渲染出如下的HTML：

  1. <div class="ember-view highestPriority">

视图属性绑定

通过attributeBindings可以直接绑定代表视图的DOM元素的属性：

  1. App.MyView = Ember.View.extend({
  2.   tagName: 'a',
  3.   attributeBindings: ['href'],
  4.   href: "http://emberjs.com"
  5. });

也可以将这些属性绑定到其他命名的属性上：

  1. App.MyView = Ember.View.extend({
  2.   tagName: 'a',
  3.   attributeBindings: ['customHref:href'],
  4.   customHref: "http://emberjs.com"
  5. });

在Handlebars中自定义视图元素

当追加一个视图的时候，其创建了一个新的HTML元素来存放其内容。如果视图含有子视图，子视图将作为父视图HTML元素的子节点来显示。

默认情况下，Ember.View的实例创建一个<div>元素。通过传入一个tagName参数可以覆盖这个默认行为：

  1. {{view App.InfoView tagName="span"}}

同样传入id参数可以指定视图HTML元素的ID属性：

  1. {{view App.InfoView id="info-view"}}

这使得可以容易的采用CSS ID选择器来定义样式：

  1. /** Give the view a red background. **/
  2. #info-view {
  3.   background-color: red;
  4. }

样式名称也可以采用类似的方式来指定：

  1. {{view App.InfoView class="info urgent"}}

采用classBinding而不是class可以将样式名绑定到视图的一个属性。这与bind-attr的行为一致：

  1. App.AlertView = Ember.View.extend({
  2.   priority: "p4",
  3.   isUrgent: true
  4. });
  1. {{view App.AlertView classBinding="isUrgent priority"}}

上述代码生成如下的视图包裹：

  1. <div id="ember420" class="ember-view is-urgent p4"></div>