4.|4. Ember.js学习- 模板 4.Ember.js学习-模板

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, {{firstName}} {{lastName}}!

默认的，顶层的application模板被绑定到ApplicationController：

文章图片
屏幕快照 2015-04-12 下午9.24.36.png 最终的显示结果就是：

Hello, Trek Glowacki!

这些表达式的绑定是双向的，这意味着，如果模板中使用的值发生了变化，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 绑定到布尔值 【4.|4. Ember.js学习- 模板】如果你绑定的值是布尔类型，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