nodejs

YOUR FIRST METEOR APPLICATION翻译（五）——模板

模版（Templates）

在本章节我们会创建我们首个模版。

首先，我们要在 leaderboard.html 中加入下面的代码:

1
2
3
4
5
6
<head> 
	<title>Leaderboard</title>
</head>
<body>
	<h1>Leaderboard</h1> 
</body>

下面，就让我们来创建一个模版吧！

创建模版

模版的创建是通过HTML链接Javascript实现的。当我们将接口放到模版当中我们就可以对HTML进行各种操作。

要创建一个新的模版，要将下面的代码加入到相应的HTML文件当中，当前我们把下面的代码加入到leaderboard.html后：

1
2
3
<template name="leaderboard">
	Hello World
</template>

这样我们就创建好了一个模版，并且还可以通过Javascript对模版进行操作。

要让这个模版出现在我们的浏览器中，我们要把下面的代码放到leaderboard.html的body中去。

1
{{> leaderboard}}

当我们修改完成之后保存并运行我们的项目，浏览器中就可以看到下面的景象。

客户端和服务器

Meteor.js作为一个可以兼顾前端和后端的框架，使用它可以非常轻松地一手包办前后台。

在我们继续讲解之前，我想说明一些东西。你不用完全自习地看我说的所有店，单你可以跟着我的步伐，然后自己写出所有的代码。

在Javascript文件里面，写入一下代码：

1
console.log("hello world");

运行程序，我们就可以在浏览器的Javascript控制台里面见到“hello world”。

当然地，与此同时，我们在服务器端，也就是我们运行项目的终端里面也会看见“hello world”这条信息。

出现这种现象，是因为我们把代码写到了一个客户端和服务器端都会执行代码的地方。所以，在两边我们都能看到这行代码运行。

由于在我们实际的开发中肯定会有一些代码只在服务器里面运行而不在客户端里面运行，相反也一样，所依我们要想办法把我们的代码分开来。

根据规范来的话我们可以分别建立server.js和client.js两个文件来分别存储代码，但在这里我们暂且把所有代码都放一个Javascript文件，这样方便我们对比代码在各个地方执行所会引发的情况。

如果我们要限制某些代码只在客户端执行我们要使用一下代码结构：

1
2
3
if(Meteor.isClient){
	// this code only runs on the client
}

对于服务端的代码我们则可以用一下的代码来限制：

1
2
3
if(Meteor.isServer){
	// this code only runs on the server
}

现在，服务器端和客户端的代码执行就会独立开来了，难以置信？你试一试咯～

创建Helper

（由于本人的水平有限实在不知道这个Helper该翻译成什么中文的专业名词，如果有大神知道请告知，谢谢。然后，在这里我只能根据我的理解来说明一下，据我的理解Helper就是一个Meteor帮你实时更新模版里面内容的一个实时监测器，所以，可以理解成Helper是一个帮你实时更新内容的助手，说错了求不打脸～）

我们要为模版创建Helper有两种方式：

1
2
3
4
5
6
7
8
9
10
Template.leaderboard.player = function(){
	// code goes here
	return "Some other text";
}

Template.leaderboard.helpers({
	'player': function(){
   		return "Some other text";
   	}
   });

以上两种方式都可以创建Helper，只要我们在HTML的模版（Template）中加入如下的代码：

1
{{player}}

并且运行项目，在浏览器中我们就可以看到变化了！

Each Blocks（这个也不知怎么翻译～不管了自己理解）

前面我们已经讲述过如何从数据库里面读取数据了，但是要怎样才能在网页上面展示出来呢？下面我们就来研究一下方法。

要达到这个目的，我们要在一个helper函数里面把它的返回值改成下面的代码:

1
return PlayersList.find();

到了这里还没有结束，因为我们只是仅仅在js代码里面把它返回了，要在浏览器上面展示出来我们还要在模版上面插入标签。可能有些聪明的小伙伴学习了前面的章节就会想到用下面的代码实现：

1
{{player}}

谁知道啥也没出现，事实上find（）返回了多条数据，所以直接这样事没办法显示在模版中的，我们要通过下面的代码来实现在模版中展示数据：

1
2
3
{{#each player}}
	test
{{/each}}

使用了上面的代码，如果你PlayersList里面有多条数据的话，就会在浏览器中出现相应数目的test了。

现在假设我们的PlayersList所读取的集合里面有如下图的数据：

我们只需通过把下面的代码加到HTML的模版当中就可以枚举PlayersList集合里面的name和score了：

1
2
3
{{#each player}}
	{{name}}: {{score}}
{{/each}}

感谢meteortips & David以上内容根据英文版的YOUR FIRST METEOR APPLICATION粗略翻译而来，在未经我本人允许的情况下请勿转载，违者本人保留法律追究的权利。