4. Ember.js学习- 模板

THE APPLICATION TEMPLATE

application模板是程序的默认模板,会在应用启东市被渲染。

你应该在这里放置应用的头部,尾部,以及其他装饰性的内容。另外你应该有至少一个{{outlet}}占位符,路由会根据当前的URL,选择在outlet中插入合适的内容。

下面是一个例子:

4. Ember.js学习- 模板_第1张图片
屏幕快照 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标签很像,但它给与了你内嵌表达式以改变展示内容的能力。

定义模板
4. Ember.js学习- 模板_第2张图片
屏幕快照 2015-04-12 下午9.14.45.png

这个模板没有名字,他会被编译,并且作为应用的application模板显示给用户。你也可以给模板起一个名字,以备后续使用。

4. Ember.js学习- 模板_第3张图片
屏幕快照 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}} 工具可以展示一个列表的内容

4. Ember.js学习- 模板_第4张图片
屏幕快照 2015-04-12 下午9.39.26.png

渲染后的html内容如下:


4. Ember.js学习- 模板_第5张图片
屏幕快照 2015-04-12 下午9.39.58.png

{{#each}}工具函数可以有一个{{else}}分支,如果集合为空,else分支的内容就会被显示出来。

4. Ember.js学习- 模板_第6张图片
屏幕快照 2015-04-12 下午9.43.51.png

绑定元素属性

除了正常的文本内容,你可能想要你的模板包含的HTML元素的属性绑定到controller中。

4. Ember.js学习- 模板_第7张图片
屏幕快照 2015-04-12 下午9.47.28.png

如果给{{bind-attr}}使用布尔值,这样就可以添加或者移除指定的属性,例如:

4. Ember.js学习- 模板_第8张图片
屏幕快照 2015-04-12 下午9.49.41.png
添加DATA属性

默认情况下,view的工具函数不接受data属性,例如:

4. Ember.js学习- 模板_第9张图片
屏幕快照 2015-04-12 下午9.53.57.png

有两种方法可以支持data属性,一种方式是为视图添加一个属性绑定

4. Ember.js学习- 模板_第10张图片
屏幕快照 2015-04-12 下午9.55.45.png

另一种方式是:在跟视图上做自动绑定data属性。

4. Ember.js学习- 模板_第11张图片
屏幕快照 2015-04-12 下午9.59.16.png

绑定类

元素的class属性可以像其他属性一样进行绑定

4. Ember.js学习- 模板_第12张图片
屏幕快照 2015-04-12 下午10.02.04.png
绑定到布尔值

如果你绑定的值是布尔类型,Ember.js会使用一个中划线版本的属性名作为类名。

4. Ember.js学习- 模板_第13张图片
屏幕快照 2015-04-12 下午10.05.20.png

你也可以指定一个类名

4. Ember.js学习- 模板_第14张图片
屏幕快照 2015-04-12 下午10.06.26.png
静态类

如果你有一个元素,他有一个静态类和一个需要绑定的类,你需要在绑定属性列表中包含该静态类,前缀加一个冒号:

4. Ember.js学习- 模板_第15张图片
屏幕快照 2015-04-12 下午10.11.25.png
绑定多个类
4. Ember.js学习- 模板_第16张图片
屏幕快照 2015-04-12 下午10.12.16.png

LINKS

{{link-to}} helps

你使用{{link-to}} 创建了一个link

4. Ember.js学习- 模板_第17张图片
屏幕快照 2015-04-12 下午10.22.24.png

ACTIONS

{{action}} HELPER

你的app经常需要提供让用户和控件进行交互的方式以改变程序的运行状态。
你可以使用{{action}} 工具让一个元素可以点击,当用户点击该元素时,定义好的事件就会发送到你的应用程序。

4. Ember.js学习- 模板_第18张图片
屏幕快照 2015-04-12 下午10.38.16.png

注意:action可以绑定到所有的DOM元素上,但不是所有的都能响应click事件,例如将一个action添加到没有href属性的A标签上,或者添加到一个div上,一些浏览器就不会执行关联的function,

ACTION参数

你可以选择性的传递参数到action handler,在action name后的任何值将作为参数传递给handler

下面的例子将post对象传递给对应的action定义

4. Ember.js学习- 模板_第19张图片
屏幕快照 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,

4. Ember.js学习- 模板_第20张图片
屏幕快照 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
4. Ember.js学习- 模板_第21张图片
屏幕快照 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}}
4. Ember.js学习- 模板_第22张图片
屏幕快照 2015-04-13 上午12.10.17.png
TEXT AREAS
{{textarea value=name cols="80" rows="6"}}
4. Ember.js学习- 模板_第23张图片
屏幕快照 2015-04-13 上午12.11.32.png

你可能感兴趣的:(4. Ember.js学习- 模板)