آموزش الگوها در Meteor
آموزش الگوها در Meteor
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش الگوها در Meteor خواهیم پرداخت.
الگوهای Meteor از سه تگ سطح بالا استفاده می کنند. دو مورد اول سر و بدن است. این تگ ها همان عملکردهای معمول HTML را انجام می دهند. تگ سوم الگو است. این مکانی است که ما HTML را به JavaScript متصل می کنیم.
الگوی ساده
مثال زیر نحوه کار این را نشان می دهد. ما در حال ایجاد الگویی با ویژگی name = “myParagraph” هستیم. تگ الگوی ما در زیر عنصر بدنه ایجاد شده است ، با این وجود ، لازم است قبل از اینکه روی صفحه نمایش داده شود، آن را اضافه کنیم. ما می توانیم این کار را با استفاده از نحو {{> myParagraph}} انجام دهیم. در الگوی خود، ما از آکولاد های دو گانه ({{متن}}) استفاده می کنیم. این زبان قالب Meteor است که Spacebars نامیده می شود.
در پرونده جاوا اسکریپت ما در حال تنظیم روش Template.myParagraph.helpers ({}) هستیم که اتصال ما به الگوی ما خواهد بود. ما در این مثال فقط از text helper استفاده می کنیم.
meteorApp.html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<head> <title>meteorApp</title> </head> <body> <h1>Header</h1> {{> myParagraph}} </body> <template name = "myParagraph"> <p>{{text}}</p> </template> |
meteorApp.js
|
1 2 3 4 5 6 7 |
if (Meteor.isClient) { // This code only runs on the client Template.myParagraph.helpers({ text: 'This is paragraph...' }); } |
پس از ذخیره تغییرات، موارد زیر خروجی خواهد بود –
الگوی بلوک
در مثال زیر، ما از {{# هر پاراگراف}} برای تکرار در آرایه پاراگراف ها استفاده می کنیم و برای هر مقدار نام name = “paragraph” را برمی گردانیم.
meteorApp.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<head> <title>meteorApp</title> </head> <body> <div> {{#each paragraphs}} {{> paragraph}} {{/each}} </div> </body> <template name = "paragraph"> <p>{{text}}</p> </template> |
ما باید پاراگراف های کمکی ایجاد کنیم. این یک آرایه با پنج مقدار متن خواهد بود.
meteorApp.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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..." } ] }); } |
اکنون، می توانیم پنج پاراگراف را بر روی صفحه مشاهده کنیم.
لیست جلسات قبل آموزش Meteor
.svg)
دیدگاه شما