Meteor模板使用三个顶级标签。前两个是 head 和 body 标签。这些标签和在普通的HTML中做的工作一样。第三个标签 template。这是我们将HTML连接到JavaScript的地方。
简单的模板
下面的例子显示了这一过程。我们使用 name = "myParagraph"属性创建一个模板。我们的 template 标签body元素下方创建，但需要包括它在屏幕渲染显示之前。我们也可以使用 {{> myParagraph}} 语法. 在模板中我们使用的是双大括号 ({{text}}). 这就是所谓的 meteor 模板Spacebars 语言。
在 JavaScript文件我们设置 Template.myParagraph.helpers({}) 方法是对模板连接。我们只在本示例中使用 text 助手。
meteorApp/client/import/ui/first-tpl.html
<head>
<title>meteorApp</title>
</head>
<body>
<h1>Header</h1>
{{> myParagraph}}
</body>
<template name = "myParagraph">
<p>{{text}}</p>
</template>
在 JavaScript文件我们设置 Template.myParagraph.helpers({}) 方法是对模板连接。我们只在本示例中使用 text 助手。
meteorApp/client/main.js
import { Template } from 'meteor/templating';
Template.myParagraph.helpers({
text: 'This is paragraph...'
});
我们保存更改之后，打开浏览器会得到下面的输出 -
块模板
在这个例子中，我们使用的是 {{#each paragraphs}} 遍历数组 paragraphs，并返回模板 name = "paragraph" 遍历每个值 。
meteorApp/client/import/ui/first-tpl.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>
这里我们需要创建 paragraphs 助手. 这是有五个文本值的数组。
meteorApp/client/main.js
// This code only runs on the client
import { Template } from 'meteor/templating';
Template.body.helpers({
paragraphs: [
{ text: "This is paragraph 1..." },
{ text: "This is paragraph 2..." },
{ text: "This is paragraph 3..." },
{ text: "This is paragraph 4..." },
{ text: "This is paragraph 5..." }
]
});
现在我们可以在屏幕上看到五个段落。