ดาวตก - ลุกโชน
Blaze เป็นแพ็คเกจ Meteor สำหรับการสร้างเทมเพลตปฏิกิริยาสด
วิธีการแสดงผล
วิธีนี้ใช้สำหรับการแสดงเทมเพลตลงใน DOM ขั้นแรกเราจะสร้างmyNewTemplateที่จะแสดงผล นอกจากนี้เรายังจะเพิ่มmyContainerซึ่งจะใช้เป็นองค์ประกอบหลักดังนั้นไฟล์ render เมธอดรู้ตำแหน่งที่จะแสดงเทมเพลตของเรา
eorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
ต่อไปเราจะสร้างฟังก์ชันการแสดงผลที่จะใช้อาร์กิวเมนต์สองตัว อันแรกคือเทมเพลตที่จะแสดงผลและอันที่สองเป็นองค์ประกอบหลักที่เรากล่าวถึงข้างต้น
eorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
Blaze.render(myNewTemplate, myContainer);
}
});
![](https://post.nghiatu.com/assets/tutorial/meteor/images/meteor-blaze-render.jpg)
แสดงผลด้วยข้อมูล
หากคุณต้องการส่งผ่านข้อมูลบางอย่างในเชิงโต้ตอบคุณสามารถใช้ renderWithDataวิธี. HTML จะเหมือนกับในตัวอย่างก่อนหน้านี้ทุกประการ
eorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
เราสามารถเพิ่มข้อมูลของเราเป็นอาร์กิวเมนต์ที่สองใน Meteor.renderWithDataวิธี. อีกสองอาร์กิวเมนต์จะเหมือนกับในตัวอย่างก่อนหน้านี้ ในตัวอย่างนี้ข้อมูลของเราคือฟังก์ชันที่จะบันทึกข้อความบางส่วน
eorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myData = function() {
console.log('Log from the data object...')
}
var myContainer = document.getElementById('myContainer');
Blaze.renderWithData(myNewTemplate, myData, myContainer);
}
});
![](https://post.nghiatu.com/assets/tutorial/meteor/images/meteor-blaze-render-with-data.jpg)
ลบวิธีการ
เราสามารถเพิ่ม remove วิธี.
eorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
ในตัวอย่างนี้เรากำลังแสดงเทมเพลตที่จะถูกลบออกหลังจากสามวินาที สังเกตBlaze.Remove วิธีที่เราใช้เพื่อลบเทมเพลต
eorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);
Meteor.setTimeout(function() {
Blaze.remove(myRenderedTemplate);
}, 3000);
}
});
ตารางต่อไปนี้แสดงวิธีการอื่น ๆ ที่สามารถใช้ได้
ซีเนียร์ | วิธีการและรายละเอียด |
---|---|
1 | Blaze.getData([elementOrView]) ใช้สำหรับดึงข้อมูลจากองค์ประกอบการแสดงผล |
2 | Blaze.toHTML(templateOrView) ใช้สำหรับการแสดงเทมเพลตหรือมุมมองไปยังสตริง |
3 | Blaze.toHTMLWithData(templateOrView, data) ใช้สำหรับการแสดงเทมเพลตหรือมุมมองไปยังสตริงที่มีข้อมูลเพิ่มเติม |
4 | new Blaze.View([name], renderFunction) ใช้สำหรับสร้างส่วนปฏิกิริยา Blaze ใหม่ของ DOM |
5 | Blaze.currentView ใช้สำหรับรับมุมมองปัจจุบัน |
6 | Blaze.getView([element]) ใช้สำหรับรับมุมมองปัจจุบัน |
7 | Blaze.With(data, contentFunc) ใช้สำหรับสร้างมุมมองที่แสดงเนื้อหาบางส่วนพร้อมบริบท |
8 | Blaze.If(conditionFunc, contentFunc, [elseFunc]) ใช้สำหรับสร้างมุมมองที่แสดงเนื้อหาที่มีเงื่อนไขบางอย่าง |
9 | Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) ใช้สำหรับสร้างมุมมองที่แสดงเนื้อหาตามเงื่อนไขบางอย่าง (กลับด้าน Blaze.if). |
10 | Blaze.Each(argFunc, contentFunc, [elseFunc]) ใช้สำหรับสร้างมุมมองที่แสดงผล contentFunct สำหรับทุกรายการ |
11 | new Blaze.Template([viewName], renderFunction) ใช้สำหรับสร้างมุมมอง Blaze ใหม่พร้อมชื่อและเนื้อหา |
12 | Blaze.isTemplate(value) ใช้สำหรับส่งคืนค่าจริงหากค่าเป็นวัตถุเทมเพลต |