天天看点

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

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

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

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

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

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

这个示例中包含了两种绑定,第一种是通过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设置的观察者将确保视图及时更新。可以运行记事本应用并选择一条事项,然后在控制台运行以下命令试试看:

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

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

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

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

只有在选择一条事项时才显示所选事项。

确保dom树的清晰,如果未选择事项,dom结构将完全不包含相关元素;看不到display:hidden这样的css代码。

确保用户总能在显示模板里看到事项更新信息。

确保用户通过文本区域字段改变所选事项值时,ember.js将更新底层事项数据。

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

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

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

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

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

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

继续阅读