Meteor - 模板

Meteor 模板使用三个顶级标签。前两个是 head 和 body。这些标签执行的功能与常规 HTML 相同。第三个标签是 template。这是我们将 HTML 连接到 JavaScript 的地方。

简单模板

以下示例显示了其工作原理。我们正在创建一个具有 name = "myParagraph" 属性的模板。我们的 template 标签是在 body 元素下方创建的，但是，我们需要在屏幕上呈现之前将其包含在内。我们可以通过使用 {{> myParagraph}> 语法来实现。在我们的模板中，我们使用双花括号 ({{text}})。这是名为 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) {
   
   // 此代码仅在客户端运行
   Template.myParagraph.helpers({
      text: 'This is paragraph...'
   });
}

保存更改后，以下将是输出 −

块模板

在下面的示例中，我们使用 {{#each passages}> 来迭代 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) {
   
   // 此代码仅在客户端运行
   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..." }
      ]
   });
}

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