可以看到，HTML 模板的开头非常简单。无需担忧如何包含 BODY 标记、DOCTYPE 修饰符甚至 JavaScript 和 CSS 文件。Meteor 会为您处理所有这些操作。有关 Meteor 的 JavaScript 和 CSS 包的更多信息，请参阅 参考资料，获取 Meteor 网站的链接。
{{> 语法表示 “呈现此模板”。可以看到，realtime_links.html 呈现了 3 个模板：
是一个简单头部，显示了数据库中的链接数量。
显示了链接的列表和它们的相关投票。
是添加新链接的表单。
清单 4 显示了 header 模板。
清单 4. realtime_links.html header 模板<template> <h1>The Link Collection</h1> <p>We currently have {{collection_size}} links.</p> </template>
header 模板呈现了一个 h1 标记以及对集合大小的简短描述。collection_size 方法是在 JavaScript 文件 realtime_links.js 中定义的（这将在 下一节 中详细讨论）。Meteor 自动观察某个模板插入了哪些数据片段。所以，在更新集合大小时，header 模板会自动更新。
请注意，这里使用的 {{ ... } 语法类似于 Ruby on Rails 中的 <%= ... %> 或 PHP 中的 <?= ... ?>。它可插入任意代码，所以能够以这种方式插入任何有用的动态表达式。
清单 5 显示了 link_list 模板。
清单 5. realtime_links.html link_list 模板<template name= "link_list"> <ul> {{#each links }} <li> {{> link_detail }} </li> {{/each }} </ul> </template>
如您所见，清单 5 中的代码是一个链接列表。realtime_links.js JavaScript 文件中的 links 方法提供了此列表。系统会向每个链接呈现link_detail 模板。请注意，无需传递任何参数，因为 Handlebars 的 #each 循环会将每次迭代的当前上下文设置为当前对象。换句话说，会将 link_detail 模板的本地方法正确解释为每个链接对象的方法。
清单 6 显示了 link_detail 模板，它控制了为每个链接显示的数据。
清单 6. realtime_links.html link_detail 模板<template> <div> <h1>{{url}}</h1> <p><strong>Stats:</strong> up: {{thumbs_up}} down: {{thumbs_down}} net score: {{score}}</p> <input type="button" value="Thumbs Up" url="{{url}}" /> <input type="button" value="Thumbs Down" url="{{url}}" /> </div> </template>
h1 元素简单地显示当前链接的 URL。然后会提供一个间断的统计清单，其中包含一个链接被支持的次数、被否决的次数和它的净分数（也就是两个值的差）。最后，有两个按钮：一个用于投赞成或支持票，另一个用于投反对或否决票。JavaScript 文件定义这些按钮的行为，但是在深入介绍此主题前，还有一个模板需要了解。
清单 7 显示了 add_new_link 模板。
清单 7. realtime_links.html add_new_link 模板<template> <div> URL: <input> <input type="button" value="Click" /> </div> </template>
该模板只是一个文本输入字段和一个按钮，它们共同形成了向您列表中添加新 URL 的界面。