《Ember.js实战》——2.2 自动更新模板-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Ember.js实战》——2.2 自动更新模板

简介: 这时很容易想象,如果要在记事本应用与真实的服务器端应用之间同步记事本数据,会发生些什么。更新有效事项的数量、切换所选事项,甚至改变所选事项的内容,这些操作都能够通过服务器端的推送请求来发起。你只需编写少量的语句,就可以实现大批应用功能,完成所有这些任务的同时还可以保持应用程序结构的合理性。

本节书摘来自异步社区《Ember.js实战》一书中的第2章,第2.2节,作者:【挪】Joachim Haagen Skeie(乔基姆•哈根•斯基)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.2 自动更新模板

Ember.js默认使用Handlebars.js模板引擎。Ember Handlebars实现的一个关键点是无论何时将模板与底层数据联系起来,Ember.js都会在应用各层之间创建双向绑定。在第1章记事本应用程序开发过程中你已经了解了相关工作机制。

思考一下代码清单2-2里的notes/note模板代码。

代码清单2-2 重访notes/note模板

screenshot

这个示例中包含了两种绑定,第一种是通过Handlebars表达式实现模板绑定;第二种是通过Binding关键字在自定义视图上实现属性绑定,与代码清单2-1类似。

重点关注一下Handlebars表达式{{name}}。即使是模板中的一个简单表达式,也蕴藏了大量实现细节。notes/note模板注入了对应的支持控制器上下文。这样,将数据填入模板的就是控制器NotesNoteController。

在Ember.js内部实现里,这样将操作NotesNoteController的model属性。这可能看上去有点奇怪,但{{name}}是{{model.name}}的速记法,{{model.name}}反过来又是{{controller.model.name}}的速`记法。实际上,你可以在模板里使用其中任何一种表达式打印事项名称。Ember Handlebars实现里的优雅之处在于无论属性何时发生改变,模板内容都会相应更新,Ember.js会确保视图同步并自动更新。例如,如果你在控制台改变了事项名称,Ember.js设置的观察者将确保视图及时更新。可以运行记事本应用并选择一条事项,然后在控制台运行以下命令试试看:

screenshot

你将看到左边的事项列表和所选事项顶部信息里的事项名称已改变。如图2-6所示。

screenshot

如果只想显示所选事项给用户,可以使用Handlebars的if辅助器。{{#if model}}语句确保控制器的模型属性在非null或undefined的情况下,才执行if辅助器里`的代码。通过少量的代码,Ember.js就可以实现原先需要手动为各个视图编码的功能。

  • 只有在选择一条事项时才显示所选事项。
  • 确保DOM树的清晰,如果未选择事项,DOM结构将完全不包含相关元素;看不到display:hidden这样的CSS代码。
  • 确保用户总能在显示模板里看到事项更新信息。
  • 确保用户通过文本区域字段改变所选事项值时,Ember.js将更新底层事项数据。

在结束自动更新模板的讨论之前,我们再来做件事情:通过Ember Data创建全新的Note对象。在控制台执行以下命令:

screenshot

首先通过容器,使用store:main关键字获取Ember Data存储器。之后,通过createRecord函数,传入事项id和名称创建一条新事项。当执行这条命令时,请注意,新事项即添加在事项列表的底部。

这时很容易想象,如果要在记事本应用与真实的服务器端应用之间同步记事本数据,会发生些什么。更新有效事项的数量、切换所选事项,甚至改变所选事项的内容,这些操作都能够通过服务器端的推送请求来发起。你只需编写少量的语句,就可以实现大批应用功能,完成所有这些任务的同时还可以保持应用程序结构的合理性。

Ember.js默认的模板引擎Handlebars拥有集成到Ember.js的大量特性,第4章会详细介绍Handlebars。

你可能想知道如何处理实际数据与显示数据不匹配的情况。类似的,如果要显示的、或者依赖if/each辅助器的数据比较复杂,你该怎么做?这些场景正是计算属性的用武之地。

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章