Meteor - 模板

Meteor 模板使用三个顶级标签。前两个是head和body。这些标签的功能与普通HTML中的相同。第三个标签是template。在这里，我们将HTML连接到JavaScript。

简单模板

下面的例子展示了它是如何工作的。我们正在创建一个具有name = "myParagraph"属性的模板。我们的template标签创建在body元素下面，但是，我们需要在它渲染到屏幕上之前包含它。我们可以使用{{> myParagraph}}语法来实现。在我们的模板中，我们使用了双大括号({{text}})。这是Meteor模板语言，称为Spacebars。

在我们的JavaScript文件中，我们设置了Template.myParagraph.helpers({})方法，这将是我们与模板的连接。在这个例子中，我们只使用了text辅助函数。

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <h1>Header</h1>
   {{> myParagraph}}
</body>
 
<template name = "myParagraph">
   <p>{{text}}</p>
</template>

meteorApp.js

if (Meteor.isClient) {
   
   // This code only runs on the client
   Template.myParagraph.helpers({
      text: 'This is paragraph...'
   });
}

保存更改后，输出如下：

块模板

在下面的例子中，我们使用{{#each paragraphs}}迭代paragraphs数组，并为每个值返回模板name = "paragraph"。

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{#each paragraphs}}
         {{> paragraph}}
      {{/each}}
   </div>
</body>
 
<template name = "paragraph">
   <p>{{text}}</p>
</template>

我们需要创建paragraphs辅助函数。这将是一个包含五个文本值的数组。

meteorApp.js

if (Meteor.isClient) {
   
   // This code only runs on the client
   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..." }
      ]
   });
}

现在，我们可以在屏幕上看到五个段落。

打印页面