> Discover Meteor中文手册 > Meteor 模版

模版

为了更容易地进入 Meteor 的开发,我们将采用从外向内的方法来搭建项目。换句话说,我们将首先建立一个 HTML/JavaScript 的外壳,然后把它放到我们的项目里,内部细节处理稍后再说。

这意味着在本章中,我们只关注 /client 目录里面的事情。

让我们先在 /client 目录创建一个 main.html 文件,并写入以下代码:

<head>
  <title>Microscope</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">
      <h3><a href="{{url}}">{{title}}</a><span>{{DOMain}}</span></h3>
    </div>
  </div>
</template>

注意模板的 name="postsList" 属性,它的作用是告诉 Meteor 去根据这个名称来跟踪这个模板的位置。(注意的是实际文件的文件名不相关。)

是时候来介绍 Meteor 的模板系统 Spacebars 了。Spacebar 就是简单的 HTML 加上三件事情:Inclusion (有时也称作 “partial”)、ExpressionBlock Helper

Inclusion :通过 {{> templateName}} 标记,简单直接地告诉 Meteor 这部分需要用相同名称的模板来取代(在我们的例子中就是 postItem )。

Expression :比如 {{title}} 标记,它要么是调用当前对象的属性,要么就是对应到当前模板管理器中定义的 helper 方法,并返回其方法值(后面会详细讨论)。

Block Helper :在模板中控制流程的特殊标签,如 {{#each}}…{{/each}}{{#if}}…{{/if}}

进一步学习

你如果想了解更多关于 Spacebars,可以参考 Spacebars 文档。

有了这些知识,我们就可以很容易去理解了。

首先,在 postsList 模板里,我们通过 {{#each}}…{{/each}} Block Helper 去遍历一个 posts 对象。然后,每次迭代我们去包含 postItem 模板。

这个 posts 对象来自哪里?好问题。它实际上是一个 模板 helper,你可以想象它是动态值的占位符(placeholder)。

postItem 这个模板本身相当简单。它只使用三个标签: {{url}}{{title}} 都返回其集合的属性,而 {{domain}} 则调用模板对应的 helper 方法。

模板 Helper

到目前为止我们已经学会了使用 Spacebars ,这只是在 HTML 的基础上多几个标签而已。不像其他语言如 PHP (甚至常规 HTML 页面,还包含了 JavaScript), Meteor 只是让模板和逻辑进行分离,而这些模板本身并不需要做很多复杂的事情。

为了让连接变得更流畅,一个模板需要 helper。你可以想象这些 helper 就是厨师用食材(你的数据)烹饪好佳肴(模板),再由服务员端到你面前。

换句话说,模板的作用局限于显示或循环变量,而 helper 则扮演着一个相当重要的角色:把值分配给每个变量。

Contoller 控制器?

我们也许会情不自禁地认为包含所有模板 helper 的文件是个 controller(控制器)。但这是很模糊的,因为 controller (至少在 MVC 情况下)通常有些不同的作用。

所以我们决定远离那个术语,在谈论关于模板涉及的 JavaScript 代码时,就简单地称为“模板的 helper”或是“模板的逻辑”。

为简单起见,我们将采用与模板同名的方式来命名包含其 helper 的文件,区别是 .js 扩展名。那好让我们马上在 /client/templates/posts 目录下创建 posts_list.js 文件,开始构建我们第一个 helper:

var postsData = [
  {
    title: 'Introducing Telescope',
    url: 'Http://sachagreif.com/introducing-telescope/'
  }, 
  {
    title: 'Meteor',
    url: 'http://meteor.com'
  }, 
  {
    title: 'The Meteor Book',
    url: 'http://themeteorbook.com'
  }
];
Template.postsList.helpers({
  posts: postsData
});

如果你运行是正确的,你现在应该在浏览器中看到这样的画面:

Meteor 模版

我们刚刚在做两件事情。首先我们放置一些虚拟的基本数据到 postsData 数组中。原本数据应该是来自数据库的,但由于我们还没有学习到该怎么做(下一章揭晓),所以我们先通过使用静态数据来“作弊”。

然后,我们使用的是 Meteor 的 Template.postsList.helpers() 函数,建立了 posts 模板 helper 来返回刚刚定义的 postsData 数组。

如果你记得,现在我们在 postsList 模板中使用这个 posts helper:

<template name="postsList">
  <div class="posts">
    {{#each posts}}
      {{> postItem}}
    {{/each}}
  </div>
</template>

定义 posts helper 就就让我们的模板可以使用它,所以模板就可以遍历 postsData 数组并将里面的每个对象发送到 postItem 模板中。

添加了基本的 post 列表模板和静态数据

关于 domain Helper

类似地,我们现在创建一个 post_item.js 文件来包含 postItem 模板的逻辑:

Template.postItem.helpers({
  domain: function() {
    var a = document.createElement('a');
    a.href = this.url;
    return a.hostname;
  }
});

这一次我们 domain helper 的值不再是一个数组,而是一个匿名函数。相比起我们之前简化的虚拟数据的例子,这种模式更为常见(而且更有用)。

Meteor 模版

这个 domain helper 方法通过 JavaScript 来获取一个 URL 地址并返回其域名。但是它一开始是从哪里获得 URL 地址呢?

为了回答这个问题,我们需要回到我们的 posts_list.html 模板。{{#each}} 代码块不仅遍历我们数组,它还在代码块范围内将 this 的值赋予被遍历的对象

这意味着在 {{#each}} 标记之间,每个 post 都可以通过 this 依次访问,并且一直延伸到模板 helper(post_item.js)中。

我们现在明白了为什么 this.url 会返回当前 post 的 URL。而且,如果我们在 post_item.html 模板里面使用 {{title}}{{url}},Meteor 就会知道需要去调用 this.titlethis.url 去返回我们想要的正确值。

设置 postItem 的 domain helper

神奇的 JavaScript

尽管这对于 Meteor 来说并不特别,这里会简单解释一下上面“神奇的 JavaScript 代码”。首先,我们创建一个空的锚(a)HTML 标签并储存在内存中。

然后我们将其 href 属性设置为当前 post 的 URL (正如我们刚刚讲到的,this 在 helper 中正是当前被操作的对象)。

最后,我们利用 a 标签的特别的 hostname 属性来返回 URL 的域名。

如果你正确地紧跟着我们的进度,这时候你就会在浏览器中看到一个 post 列表。但这个列表只是调用了静态数据,它没有利用到 Meteor 实时性的特点。我们将在下一章向你展示该如何去修改!

动态代码重载

你可能已经注意到,当你修改文件的时候,不需要手动刷新页面,浏览器就会自动重新加载。

这是因为 Meteor 跟踪了项目目录下的所有文件,当检测到其中一个文件发生改变,它就会自动刷新你的浏览器。

Meteor 的动态代码重载是相当智能的,它甚至可以在两个刷新动作之间保存你的 App 状态。