关注我们

Meteor - 模板(Template)

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

简单模板

以下示例显示了它是如何工作的。无涯教程正在创建一个name=“ myParagraph”属性的模板，无涯教程可以使用{{> myParagraph}}语法来做到这一点。变量通过花括号({{text}})进行渲染。

在无涯教程的JavaScript文件中，无涯教程设置 Template.myParagraph.helpers({})方法，这将是无涯教程与模板的连接。

meteorApp.html

链接：https://www.learnfk.comhttps://www.learnfk.com/meteor/meteor-templates.html

来源：LearnFk无涯教程网

<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...'
   });
}

保存更改后，以下是输出-

Block模板

在下面的示例中，无涯教程使用 {{#each每个段落}} 遍历 paragraphs 数组并返回模板 name =" paragraph" 每个值。

meteorApp.html

链接：https://www.learnfk.comhttps://www.learnfk.com/meteor/meteor-templates.html

来源：LearnFk无涯教程网

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

无涯教程需要创建 paragraphs 助手，这是一个具有五个text的数组。

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