Meteor模板 - tw511教學網

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

現在我們可以在螢幕上看到五個段落。