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學習（一）基本語法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。