第十一章 Meteor 模版.pdf

Meteor 模版 模版 为了更容易地进⼊ Meteor 的开发，我们将采⽤从外向内的⽅法来搭建项⽬。换句 说，我们将⾸先建⽴⼀个 HTML/JavaScript 的外壳，然后把它放到我们的项⽬⾥，内 部细节处理稍后再说。 这意味着在本章中，我们只关注 /client ⽬录⾥⾯的事情。 让我们先在 /client ⽬录创建⼀个 main.html ⽂件，并写⼊以下代码： head titleMicroscope/title /head body div class=container header class=navbar navbar-default role=navigation div class=navbar-header a class=navbar-brand href=/Microscope/a /div /header div id=main {{ postsList /div /div /body 这是我们主要的 App 模板。在上⾯看到很多熟悉的 HTML 标签，除了这个 {{ postsList 标签，它是 postsList 模板的插⼊点，等⼀下我们就会说到。现 在，先让我们创建更多的模板吧。 Meteor 模板 我们项⽬的核⼼是社会新闻⽹站，它是由⼀系列的帖⼦所组成的，⽽这正是我们要调 ⽤模板的原因。 我们先在 /client ⾥⾯创建⼀个 /templates ⽬录。这⾥⽤来放我们所有的模板， 这样可以保持项⽬结构的清晰整洁，接着在 /templates ⾥⾯再创建 /posts ⽬录 来存放与帖⼦相关的模板。 查找⽂件 Meteor 的强⼤之处在于⽂件的查找。⽆论你把代码⽂件放在 /client ⽬录下的任何 地⽅，Meteor 都可以找到它并且正确地进⾏编译。这意味着你永远都不需要⼿动编写 JavaScript 或 CSS ⽂件的调⽤路径。 这也意味着你可能会把所有的⽂件放在同⼀⽬录，甚⾄所有的代码放在同⼀个⽂件。 但由于 Meteor 会把⼀切的代码都编译到⼀个压缩的⽂件⾥⾯，因此我们更偏向于把 项⽬弄得井井有条，使⽤更整洁的⽂件结构，提⾼项⽬的可读性。 接下来我们开始创建第⼆个模板。在 client/templates/posts ⽬录中，创建 posts_list.html : template name=postsList div class=posts {{#each posts {{ postItem {{/each /div /template 和 post_item.html ： template name=postItem div class=post div class=post-content h3a href={{url {{title /aspan{{domain /span /div /div /template 注意模板的 name=postsList 属性，它的作⽤是告诉 Meteor 去根据这个名称来 跟踪这个模板的位置。 （注意的是实际⽂件的⽂件名不相关。） 是时候来介绍 Meteor 的模板系统 Spacebars 了。Spacebar 就是简单的 HTML 加上三 件事情：Inclusion （有时也称作 “partial” ）、Expression 和 Block Helper 。 Inclusion ：通过 {{ templateName 标记，简单直接地告诉 Meteor 这部分需要 ⽤相同名称的模板来取代 （在我们的例⼦中就是 postItem ）。 Expression ：⽐如 {{title 标记，它要么是调⽤当前对象的属性，要么就是对应 到当前模板管理器中定义的 helper ⽅法，并返回其⽅法值 （后⾯会详细讨论）。 Block Helper ：在模板中控制流程的特殊标签，如 {{#each …{{/each 或 {{#if …{{/if 。 进⼀步学习 你如果想了解更多关于 Spacebars ，可以参考 Spacebars ⽂档。 有了这些知识，我们就可以很容易去理解了。 ⾸先，在 postsList 模板⾥，我们通过