Meteor模板

时间 2019-11-16

标签 meteor 模板繁體版

原文原文链接

Meteor模板使用三个顶级标签。前两个是 head 和 body 标签。这些标签和在普通的HTML中作的工做同样。第三个标签 template。这是咱们将HTML链接到JavaScript的地方。

简单的模板

下面的例子显示了这一过程。咱们使用 name = "myParagraph"属性建立一个模板。咱们的 template 标签body元素下方建立，但须要包括它在屏幕渲染显示以前。咱们也能够使用 {{> myParagraph}} 语法. 在模板中咱们使用的是双大括号 ({{text}}). 这就是所谓的 meteor 模板Spacebars 语言。html

在 JavaScript文件咱们设置 Template.myParagraph.helpers({}) 方法是对模板链接。咱们只在本示例中使用 text 助手。数组

meteorApp/client/import/ui/first-tpl.html

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

在 JavaScript文件咱们设置 Template.myParagraph.helpers({}) 方法是对模板链接。咱们只在本示例中使用 text 助手。浏览器

meteorApp/client/main.js

import { Template } from 'meteor/templating';
Template.myParagraph.helpers({
  text: 'This is paragraph...'
});

咱们保存更改以后，打开浏览器会获得下面的输出 -

块模板

在这个例子中，咱们使用的是 {{#each paragraphs}} 遍历数组 paragraphs，并返回模板 name = "paragraph" 遍历每一个值。ui

meteorApp/client/import/ui/first-tpl.html

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

这里咱们须要建立 paragraphs 助手. 这是有五个文本值的数组。code

meteorApp/client/main.js

// This code only runs on the client
import { Template } from 'meteor/templating';
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..." }
  ]
});

如今咱们能够在屏幕上看到五个段落。

1. Meteor模板中渲染日期格式
2. 解决Cannot find module ‘meteor/meteor’ ‘meteor/check’ ‘meteor/mongo’
3. Meteor
4. Meteor Match
5. meteor check
6. Meteor Blaze
7. meteor soul
8. 【meteor初体验-0.0.1】meteor简单开始
9. 再战坑爹的meteor之meteor-tool
10. 【转换模型+扫描线】【UVA1398】Meteor
更多相关文章...
• Maven 项目模板 - Maven教程
• Eclipse 代码模板 - Eclipse 教程
• 委托模式
• Kotlin学习（一）基本语法