آموزش بسته Blaze در Meteor

saber

4 سال پیش

امتیاز دهید post

آموزش بسته Blaze در Meteor

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش بسته Blaze در Meteor خواهیم پرداخت.

Blaze یک بسته Meteor برای ساخت الگوهای واکنشی زنده است.

روش رندر

این روش برای ارائه الگوها به DOM استفاده می شود. ابتدا myNewTemplate را ایجاد خواهیم کرد که ارائه می شود. ما همچنین myContainer را اضافه خواهیم کرد ، که به عنوان یک عنصر اصلی استفاده می شود ، بنابراین روش رندر می داند که کجا الگوی ما را ارائه دهد.

meteorApp.html

&lt;head&gt;
   &lt;title&gt;meteorApp&lt;/title&gt;
&lt;/head&gt;
 
&lt;body&gt;
   &lt;div id = "myContainer"&gt;
   &lt;/div&gt;
&lt;/body&gt;

&lt;template name = "myNewTemplate"&gt;
   &lt;p&gt;Text from my new template...&lt;/p&gt;
&lt;/template&gt;

<head>

<title>meteorApp</title>

</head>

<body>

</div>

</body>

<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);
   }
});

Meteor.startup(function () {

if(Meteor.isClient) {

var myNewTemplate = Template.myNewTemplate;

var myContainer = document.getElementById('myContainer');

Blaze.render(myNewTemplate, myContainer);

}

});

Meteor Blaze Render

اگر لازم است برخی از داده ها را به صورت واکنشی منتقل کنید ، می توانید از روش renderWithData استفاده کنید. HTML دقیقاً مانند نمونه قبلی خواهد بود.

meteorApp.html

&lt;head&gt;
   &lt;title&gt;meteorApp&lt;/title&gt;
&lt;/head&gt;
 
&lt;body&gt;
   &lt;div id = "myContainer"&gt;
   &lt;/div&gt;
&lt;/body&gt;

&lt;template name = "myNewTemplate"&gt;
   &lt;p&gt;Text from my new template...&lt;/p&gt;
&lt;/template&gt;

<head>

<title>meteorApp</title>

</head>

<body>

</div>

</body>

<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);
   }
});

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);

}

});

Meteor Blaze Render With Data

روش حذف

ما می توانیم روش حذف را اضافه کنیم.

meteorApp.html

&lt;head&gt;
   &lt;title&gt;meteorApp&lt;/title&gt;
&lt;/head&gt;
 
&lt;body&gt;
   &lt;div id = "myContainer"&gt;
   &lt;/div&gt;
&lt;/body&gt;

&lt;template name = "myNewTemplate"&gt;
   &lt;p&gt;Text from my new template...&lt;/p&gt;
&lt;/template&gt;

<head>

<title>meteorApp</title>

</head>

<body>

</div>

</body>

<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);
      }, 3000);
   }
});

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]) برای ساخت نمای مورد استفاده برای هر مورد استفاده می شود.
11	new Blaze.Template([viewName], renderFunction) برای ساخت یک نمای جدید Blaze با نام و محتوا استفاده می شود.
12	Blaze.isTemplate(value) اگر مقدار یک شی template الگو باشد ، برای بازگشت true استفاده می شود.

منبع.

لیست جلسات قبل آموزش Meteor

امتیاز دهید post

برچسب ها : آموزش Meteor آموزش برنامه نویسی موبایل

نویسنده مطلب saber

آموزش بسته Blaze در Meteor

آموزش بسته Blaze در Meteor

روش رندر

meteorApp.html

meteorApp.js

meteorApp.html

meteorApp.js

روش حذف

meteorApp.html

meteorApp.js

لیست جلسات قبل آموزش Meteor

دیدگاه شما

بدون دیدگاه

آموزش بسته Blaze در Meteor

روش رندر

meteorApp.html

meteorApp.js

meteorApp.html

meteorApp.js

روش حذف

meteorApp.html

meteorApp.js

لیست جلسات قبل آموزش Meteor

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه