流星 - 模板

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

简单模板

以下示例显示了其工作原理。我们正在创建一个具有name =“myParagraph”属性的模板。我们的模板标签是在body元素下方创建的，但是，我们需要在将其呈现在屏幕上之前将其包含在内。我们可以使用{{> myParagraph}}语法来完成。在我们的模板中，我们使用双花括号({{text}})。这是名为Spacebars的流星模板语言。

在我们的 JavaScript 文件中，我们设置Template.myParagraph.helpers({})方法，它将作为我们与模板的连接。在这个例子中我们只使用文本助手。

流星App.html

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

流星App.js

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

保存更改后，输出如下 -

流星模板输出

块模板

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

流星App.html

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

我们需要创建段落助手。这将是一个包含五个文本值的数组。

流星App.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..." }
      ]
   });
}

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

流星模板输出 2