Meteor - Blaze
Blaze là một gói Meteor để xây dựng các mẫu phản ứng trực tiếp.
Phương pháp kết xuất
Phương pháp này được sử dụng để hiển thị các mẫu vào DOM. Đầu tiên, chúng tôi sẽ tạomyNewTemplateđiều đó sẽ được kết xuất. Chúng tôi cũng sẽ thêmmyContainer, sẽ được sử dụng làm phần tử mẹ, vì vậy render phương pháp biết nơi hiển thị mẫu của chúng tôi.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>Tiếp theo, chúng ta sẽ tạo một hàm kết xuất có hai đối số. Cái đầu tiên là một mẫu sẽ được hiển thị và cái thứ hai là một phần tử mẹ mà chúng tôi đã đề cập ở trên.
meteorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
Blaze.render(myNewTemplate, myContainer);
}
});
Kết xuất với dữ liệu
Nếu bạn cần chuyển một số dữ liệu theo cách phản ứng, bạn có thể sử dụng renderWithDataphương pháp. HTML sẽ giống hệt như trong ví dụ trước.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>Chúng tôi có thể thêm dữ liệu của mình làm đối số thứ hai trong Meteor.renderWithDataphương pháp. Hai đối số khác giống như trong ví dụ trước. Trong ví dụ này, dữ liệu của chúng tôi là một hàm sẽ ghi lại một số văn bản.
meteorApp.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);
}
});
Xóa phương pháp
Chúng tôi có thể thêm remove phương pháp.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>Trong ví dụ này, chúng tôi đang hiển thị mẫu sẽ bị xóa sau ba giây. Chú ýBlaze.Remove mà chúng tôi đang sử dụng để xóa mẫu.
meteorApp.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);
}
});Bảng sau đây cho thấy các phương pháp khác có thể được sử dụng.
| Sr.No. | Phương pháp & Chi tiết |
|---|---|
| 1 | Blaze.getData([elementOrView]) Được sử dụng để lấy dữ liệu từ phần tử kết xuất. |
| 2 | Blaze.toHTML(templateOrView) Được sử dụng để hiển thị các mẫu hoặc chế độ xem cho chuỗi. |
| 3 | Blaze.toHTMLWithData(templateOrView, data) Được sử dụng để hiển thị các mẫu hoặc chế độ xem thành chuỗi với dữ liệu bổ sung. |
| 4 | new Blaze.View([name], renderFunction) Được sử dụng để tạo một phần phản ứng Blaze mới của DOM. |
| 5 | Blaze.currentView Được sử dụng để có được chế độ xem hiện tại. |
| 6 | Blaze.getView([element]) Được sử dụng để có được chế độ xem hiện tại. |
| 7 | Blaze.With(data, contentFunc) Được sử dụng để xây dựng một dạng xem hiển thị một số nội dung có ngữ cảnh. |
| số 8 | Blaze.If(conditionFunc, contentFunc, [elseFunc]) Được sử dụng để xây dựng một dạng xem hiển thị một số nội dung có điều kiện. |
| 9 | Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) Được sử dụng để xây dựng một dạng xem hiển thị một số nội dung có điều kiện (đảo ngược Blaze.if). |
| 10 | Blaze.Each(argFunc, contentFunc, [elseFunc]) Được sử dụng để xây dựng một dạng xem hiển thị contentFunct cho mọi mặt hàng. |
| 11 | new Blaze.Template([viewName], renderFunction) Được sử dụng để xây dựng một dạng xem Blaze mới với tên và nội dung. |
| 12 | Blaze.isTemplate(value) Được sử dụng để trả về true, nếu giá trị là một đối tượng mẫu. |