《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模板

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

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

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

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

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

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

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

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

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