THE APPLICATION TEMPLATE
application模板是程序的默认模板，会在应用启东市被渲染。
你应该在这里放置应用的头部，尾部，以及其他装饰性的内容。另外你应该有至少一个{{outlet}}占位符，路由会根据当前的URL，选择在outlet中插入合适的内容。
下面是一个例子：
屏幕快照 2015-04-12 下午7.57.11.png
头部和尾部总是会被展示在页面上，但是内容区域的div会根据当前 的URL是/posts 还是 /posts/15而做出改变。
如果你创建了一个标签，但是没有赋值template name，Ember会使用没有模板名称的模板作为application模板，并且自动饿将其编译，显示到屏幕上
屏幕快照 2015-04-12 下午8.03.05.png
如果你使用构建工具加载模板，请确保你模板的名称是application。
HANDLEBARS 基础
Ember.js 使用 Handlebars模板库驱动用户界面，Handlebars 模板和普通的HTML标签很像，但它给与了你内嵌表达式以改变展示内容的能力。
定义模板
屏幕快照 2015-04-12 下午9.14.45.png
这个模板没有名字，他会被编译，并且作为应用的application模板显示给用户。你也可以给模板起一个名字，以备后续使用。
屏幕快照 2015-04-12 下午9.17.46.png
HANDLEBARS 表达式
每一个模板都有一个关联的controller：模板就是在这里查找属性用来显示给用户。
Hello, <strong>{{firstName}} {{lastName}}</strong>!
默认的，顶层的application模板被绑定到ApplicationController：
屏幕快照 2015-04-12 下午9.24.36.png
最终的显示结果就是：
Hello, <strong>Trek Glowacki</strong>!
这些表达式的绑定是双向的，这意味着，如果模板中使用的值发生了变化，HTML显示的内容也会被自动的更新。
CONDITIONALS
有时你可能需要在属性存在的时候才展示模板的部分内容：
屏幕快照 2015-04-12 下午9.35.49.png
Handlebars只有在if条件为真时才会显示if block中的内容。
再看看一个if 配合else的例子
屏幕快照 2015-04-12 下午9.37.38.png
展示一个列表
使用{{#each}} 工具可以展示一个列表的内容
屏幕快照 2015-04-12 下午9.39.26.png
渲染后的html内容如下：
屏幕快照 2015-04-12 下午9.39.58.png
{{#each}}工具函数可以有一个{{else}}分支，如果集合为空，else分支的内容就会被显示出来。
屏幕快照 2015-04-12 下午9.43.51.png
绑定元素属性
除了正常的文本内容，你可能想要你的模板包含的HTML元素的属性绑定到controller中。
屏幕快照 2015-04-12 下午9.47.28.png
如果给{{bind-attr}}使用布尔值，这样就可以添加或者移除指定的属性，例如：
屏幕快照 2015-04-12 下午9.49.41.png
添加DATA属性
默认情况下，view的工具函数不接受data属性，例如：
屏幕快照 2015-04-12 下午9.53.57.png
有两种方法可以支持data属性，一种方式是为视图添加一个属性绑定
屏幕快照 2015-04-12 下午9.55.45.png
另一种方式是：在跟视图上做自动绑定data属性。
屏幕快照 2015-04-12 下午9.59.16.png
绑定类
元素的class属性可以像其他属性一样进行绑定
屏幕快照 2015-04-12 下午10.02.04.png
绑定到布尔值
如果你绑定的值是布尔类型，Ember.js会使用一个中划线版本的属性名作为类名。
屏幕快照 2015-04-12 下午10.05.20.png
你也可以指定一个类名
屏幕快照 2015-04-12 下午10.06.26.png
静态类
如果你有一个元素，他有一个静态类和一个需要绑定的类，你需要在绑定属性列表中包含该静态类，前缀加一个冒号：
屏幕快照 2015-04-12 下午10.11.25.png
绑定多个类
屏幕快照 2015-04-12 下午10.12.16.png
LINKS
{{link-to}} helps
你使用{{link-to}} 创建了一个link
屏幕快照 2015-04-12 下午10.22.24.png
ACTIONS
{{action}} HELPER
你的app经常需要提供让用户和控件进行交互的方式以改变程序的运行状态。
你可以使用{{action}} 工具让一个元素可以点击，当用户点击该元素时，定义好的事件就会发送到你的应用程序。
屏幕快照 2015-04-12 下午10.38.16.png
注意：action可以绑定到所有的DOM元素上，但不是所有的都能响应click事件，例如将一个action添加到没有href属性的A标签上，或者添加到一个div上，一些浏览器就不会执行关联的function，
ACTION参数
你可以选择性的传递参数到action handler，在action name后的任何值将作为参数传递给handler
下面的例子将post对象传递给对应的action定义
屏幕快照 2015-04-12 下午11.40.06.png
指定事件类型
默认的当用户点击元素时，{{action}} helper监听并触发click事件，通过使用on选项，你可以指定一个替代的事件，需要注意的是，你需要对事件的名称格式化，例如两个单词的事件名称，keypress应该写作keyPress
屏幕快照 2015-04-12 下午11.45.18.png
停止事件传播
默认，{{action}} helper 允许事件冒泡到父DOM节点，你可以阻止事件冒泡到父节点。
例如：你有一个a元素，在他的内部有一✗button，你要保证用户点击了 ✗号后，a标签没有被激活
屏幕快照 2015-04-12 下午11.51.03.png
如果没有bubbles=false，当用户点击了button，button的action就被触犯，接着浏览器就会将事件传播给a标签。
指定一个target
默认的，{{action}} helper 会将action发送给view的target，这通常是view的controller，
你可以使用target选项指定一个替代的目标，这个常用于发送action给view而不是controller，
屏幕快照 2015-04-12 下午11.58.09.png
INPUT HELPERS
{{input}} 和 {{textarea}} helpers被用来创建通用的form控件，
{{input}} helpers包装了内建的Ember.TextField and Ember.Checkbox views,{{textarea}}包装了 Ember.TextArea
TEXT FIELDS
屏幕快照 2015-04-13 上午12.06.08.png
ACTIONS
分发action到指定的事件，例如enter或者key-press
{{input value=firstName action="updateFirstName" on="key-press"}}
当赋值给on时，事件名需要使用中划线连接
CHECKBOXES
{{input type="checkbox" name="isAdmin" checked=isAdmin}}
屏幕快照 2015-04-13 上午12.10.17.png
TEXT AREAS
{{textarea value=name cols="80" rows="6"}}
屏幕快照 2015-04-13 上午12.11.32.png
网友评论