Meteor - 模板(Template)

首页 / Meteor入门教程 / Meteor - 模板(Template)

Meteor模板正在使用三个顶级标签。前两个是 headbody 。这些标签执行与常规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...'
   });
}

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

Meteor Templates Output

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

现在,无涯教程可以在屏幕上看到五个段落。

Meteor Templates Output 2

这一章《Meteor - 模板(Template)》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

好记忆不如烂笔头。留下你的足迹吧 :)

相关推荐

从0开始学微服务 -〔胡忠想 - 〕

DevOps实战笔记 -〔石雪峰 - 〕

操作系统实战45讲 -〔彭东 - 〕

反爬虫兵法演绎20讲 -〔DS Hunter - 〕

c中的意外printf行为,每次运行时以十六进制更改值打印浮点数

如何在 Jetpack compose 中将 Canvas 中的文本居中?

Pandas 加入导致形状不匹配

SwiftUI:异步网络请求后@State 值不更新

叠加视图不在堆栈中维护自身 - SwiftUI

PHP MySQLi 在没有 bind_param 的情况下执行