下面的例子顯示了這一過程。我們使用 name = "myParagraph"屬性創(chuàng)建一個模板。我們的 template 標(biāo)簽body元素下方創(chuàng)建，但需要包括它在屏幕渲染顯示之前。我們也可以使用 {{> myParagraph}} 語法. 在模板中我們使用的是雙大括號 ({{text}}). 這就是所謂的 meteor 模板Spacebars 語言。

在 JavaScript文件我們設(shè)置 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文件我們設(shè)置 Template.myParagraph.helpers({}) 方法是對模板連接。我們只在本示例中使用 text 助手。

meteorApp/client/main.js

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

我們保存更改之后，打開瀏覽器會得到下面的輸出 -

塊模板

在這個例子中，我們使用的是 {{#each paragraphs}} 遍歷數(shù)組 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>

這里我們需要創(chuàng)建 paragraphs 助手. 這是有五個文本值的數(shù)組。

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

現(xiàn)在我們可以在屏幕上看到五個段落。

上一篇：Meteor事件下一篇：Meteor部署