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, <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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,596评论 18 139
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,733评论 6 342
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,863评论 6 13
  • 学习资料来自 Angular.cn 与 Angular.io。 模板语法 在线例子 在 Angular 中,组件扮...
    小镭Ra阅读 3,712评论 0 3
  • 一对智力不是太高的夫妻 他们不会说太多客套的话 甚至连话都表达不太清楚 拿着自己手作的土特产 对我们表示感谢 并且...
    咸魚阅读 117评论 0 0