Meteor - เทมเพลต

เทมเพลต Meteor ใช้แท็กระดับบนสุดสามแท็ก สองตัวแรกคือhead และ body. แท็กเหล่านี้ทำหน้าที่เหมือนกับใน HTML ทั่วไป แท็กที่สามคือtemplate. นี่คือสถานที่ที่เราเชื่อมต่อ HTML กับ JavaScript

เทมเพลตอย่างง่าย

ตัวอย่างต่อไปนี้แสดงวิธีการทำงาน เรากำลังสร้างเทมเพลตด้วยname = "myParagraph"แอตทริบิวต์ ของเราtemplate สร้างแท็กด้านล่าง bodyอย่างไรก็ตามเราจำเป็นต้องรวมไว้ก่อนที่จะแสดงผลบนหน้าจอ เราสามารถทำได้โดยใช้{{> myParagraph}}ไวยากรณ์ ในเทมเพลตของเราเรากำลังใช้เครื่องหมายปีกกาสองชั้น({{text}}). นี่คือภาษาแม่แบบดาวตกที่เรียกว่าSpacebars.

ในไฟล์ JavaScript ของเราเรากำลังตั้งค่า Template.myParagraph.helpers({})วิธีการที่จะเชื่อมต่อกับแม่แบบของเรา เรากำลังใช้text ผู้ช่วยในตัวอย่างนี้

eorApp.html

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

eorApp.js

if (Meteor.isClient) {
   
   // This code only runs on the client
   Template.myParagraph.helpers({
      text: 'This is paragraph...'
   });
}

หลังจากบันทึกการเปลี่ยนแปลงแล้วผลลัพธ์ต่อไปนี้จะเป็น -

เทมเพลตบล็อก

ในตัวอย่างต่อไปนี้เรากำลังใช้ {{#each paragraphs}} เพื่อทำซ้ำในไฟล์ paragraphs อาร์เรย์และเทมเพลตการส่งคืน name = "paragraph" สำหรับแต่ละค่า

eorApp.html

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

เราจำเป็นต้องสร้าง paragraphsผู้ช่วย. นี่จะเป็นอาร์เรย์ที่มีค่าข้อความห้าค่า

eorApp.js

if (Meteor.isClient) {
   
   // This code only runs on the client
   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..." }
      ]
   });
}

ตอนนี้เราสามารถเห็นห้าย่อหน้าบนหน้าจอ