Meteor模板正在使用三个顶级标签。前两个是 head 和 body 。这些标签执行与常规HTML相同的功能,第三个标签是 template 。这是无涯教程将HTML连接到JavaScript的地方。
简单模板
以下示例显示了它是如何工作的。无涯教程正在创建一个name=“ myParagraph”属性的模板,无涯教程可以使用{{> myParagraph}}语法来做到这一点。变量通过花括号({{text}})进行渲染。
在无涯教程的JavaScript文件中,无涯教程设置 Template.myParagraph.helpers({})方法,这将是无涯教程与模板的连接。
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...' }); }
保存更改后,以下是输出-
![Meteor Templates Output](http://dev-img.mos.moduyun.com/20231017/095e9e44-50f4-484c-a1af-0db711a7d8c5.jpg)
Block模板
在下面的示例中,无涯教程使用 {{#each每个段落}} 遍历 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 助手,这是一个具有五个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](http://dev-img.mos.moduyun.com/20231017/a28495ba-c6e3-407a-9e62-8c6b5b90c44d.jpg)