آموزش بسته Blaze در Meteor
آموزش بسته Blaze در Meteor
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش بسته Blaze در Meteor خواهیم پرداخت.
Blaze یک بسته Meteor برای ساخت الگوهای واکنشی زنده است.
روش رندر
این روش برای ارائه الگوها به DOM استفاده می شود. ابتدا myNewTemplate را ایجاد خواهیم کرد که ارائه می شود. ما همچنین myContainer را اضافه خواهیم کرد ، که به عنوان یک عنصر اصلی استفاده می شود ، بنابراین روش رندر می داند که کجا الگوی ما را ارائه دهد.
meteorApp.html
<head> <title>meteorApp</title> </head> <body> <div id = "myContainer"> </div> </body> <template name = "myNewTemplate"> <p>Text from my new template...</p> </template>
بعد ، ما یک تابع رندر ایجاد خواهیم کرد که دو آرگومان خواهد گرفت. مورد اول الگویی است که ارائه می شود و دیگری عنصری والد است که در بالا به آن اشاره کردیم.
meteorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
Blaze.render(myNewTemplate, myContainer);
}
});
اگر لازم است برخی از داده ها را به صورت واکنشی منتقل کنید ، می توانید از روش renderWithData استفاده کنید. HTML دقیقاً مانند نمونه قبلی خواهد بود.
meteorApp.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 اضافه کنیم. دو استدلال دیگر همانند مثال قبلی است. در این مثال ، داده های ما تابعی است که متن را وارد می کند.
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);
}
});
روش حذف
ما می توانیم روش حذف را اضافه کنیم.
meteorApp.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 توجه کنید که ما برای حذف الگو استفاده می کنیم.
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);
}, ۳۰۰۰);
}
});
جدول زیر سایر روشهای قابل استفاده را نشان می دهد.
| متد و جزئیات | |
|---|---|
| ۱ | Blaze.getData([elementOrView])
برای بازیابی داده ها از عنصر ارائه استفاده می شود. |
| ۲ | Blaze.toHTML(templateOrView)
برای ارائه الگوها یا نماها به رشته استفاده می شود. |
| ۳ | Blaze.toHTMLWithData(templateOrView, data)
برای ارائه الگوها یا نماها به رشته با داده های اضافی استفاده می شود. |
| ۴ | new Blaze.View([name], renderFunction)
برای ایجاد یک بخش واکنش پذیر جدید Blaze از DOM استفاده می شود. |
| ۵ | Blaze.currentView
برای گرفتن نمای فعلی استفاده می شود. |
| ۶ | Blaze.getView([element])
برای گرفتن نمای فعلی استفاده می شود. |
| ۷ | Blaze.With(data, contentFunc)
برای ساخت نمایی استفاده می شود که برخی از مطالب را با زمینه ارائه می دهد. |
| ۸ | Blaze.If(conditionFunc, contentFunc, [elseFunc])
برای ساخت نمایی استفاده می شود که برخی از مطالب مشروط را ارائه می دهد. |
| ۹ | Blaze.Unless(conditionFunc, contentFunc, [elseFunc])
برای ساخت نمایی که مقداری محتوای شرطی ارائه می دهد استفاده می شود (معکوس Blaze.if). |
| ۱۰ | Blaze.Each(argFunc, contentFunc, [elseFunc])
برای ساخت نمای مورد استفاده برای هر مورد استفاده می شود. |
| ۱۱ | new Blaze.Template([viewName], renderFunction)
برای ساخت یک نمای جدید Blaze با نام و محتوا استفاده می شود. |
| ۱۲ | Blaze.isTemplate(value)
اگر مقدار یک شی template الگو باشد ، برای بازگشت true استفاده می شود. |
لیست جلسات قبل آموزش Meteor
.svg)
دیدگاه شما