Meteor模板

最新推荐文章于 2019-11-23 15:11:39 发布

weixin_34417183

最新推荐文章于 2019-11-23 15:11:39 发布

阅读量105

点赞数

文章标签： javascript ui ViewUI

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

简单的模板

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

在 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" 遍历每个值。

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 助手. 这是有五个文本值的数组。

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

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

weixin_34417183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Meteor模板

Meteor模板使用三个顶级标签。前两个是 head 和 body 标签。这些标签和在普通的HTML中做的工作一样。第三个标签 template。这是我们将HTML连接到JavaScript的地方。简单的模板下面的例子显示了这一过程。我们使用 name = "myParagraph"属性创建一个模板。我们的 template 标签body元素下方创建，但需要包括它在屏幕渲染显示之前。...
复制链接

扫一扫