खोज…
परिचय
ब्लेज़ डायनामिक, रिएक्टिव HTML टेम्पलेट लिखकर यूजर इंटरफेस बनाने के लिए एक शक्तिशाली लाइब्रेरी है। ब्लेज़ टेंपलेटिंग लूप्स और सशर्त लॉजिक को सीधे HTML मार्कअप में उपयोग करने की अनुमति देता है। यह खंड ब्लेज़ के साथ Meteor.js में टेम्प्लेटिंग के उचित उपयोग को बताता और प्रदर्शित करता है।
एक विधि कॉल से एक टेम्पलेट आबाद
<template name="myTemplate">
{{#each results}}
<div><span>{{name}}</span><span>{{age}}</span></div>
{{/each}}
</template>
Template.myTemplate.onCreated(function() {
this.results = new ReactiveVar();
Meteor.call('myMethod', (error, result) => {
if (error) {
// do something with the error
} else {
// results is an array of {name, age} objects
this.results.set(result);
}
});
});
Template.myTemplate.helpers({
results() {
return Template.instance().results.get();
}
});
एक टेम्पलेट का डेटा संदर्भ
जब भी किसी टेम्पलेट को कॉल किया जाता है, तो टेम्पलेट का डिफ़ॉल्ट डेटा संदर्भ स्पष्ट रूप से कॉलर से प्राप्त किया जाता है, उदाहरण के लिए childTemplate, parentTemplate यानी कॉलर टेम्पलेट के डेटा संदर्भ को प्राप्त करता है।
<template name="parentTemplate">
{{#with someHelperGettingDataForParentTemplate}}
<h1>My name is {{firstname}} {{lastname}}</h1>
//some stuffs here
{{> childTemplate}}
{{/with}}
</template>
उपरोक्त स्थिति में, माता-पिता के टेम्पलेट के लिए सहायक डेटा जो भी डेटा स्वचालित रूप से चाइल्डप्लेट द्वारा प्राप्त किया जाता है। उदाहरण के लिए, {{firstname}} और {{lastname}} चाइल्डप्लेट से एक्सेस किया जा सकता है और साथ ही नीचे दिखाया गया है।
<template name="childTemplate">
<h2>My name is also {{firstname}} {{lastname}}</h2>
</template>
हम नीचे दिए उदाहरण में टेम्प्लेट में तर्क पास करके चाइल्डप्लेट के डेटा संदर्भ को स्पष्ट रूप से परिभाषित कर सकते हैं।
<template name="parentTemplate">
{{#with someHelperGettingDataForParentTemplate}}
<h1>My name is {{firstname}} {{lastname}}</h1>
//some stuffs here
{{> childTemplate childData=someHeplerReturningDataForChild}}
{{/with}}
</template>
हेल्पर को कुछ मानकर हेल्टरपरेटिंगडॉटफ़ॉरचाइल्ड {{पेशे: "उल्का डेवलपर", शौक: "स्टैकओवरफ्लोइंग"} जैसी वस्तु लौटाता है, यह विशेष वस्तु चाइल्डप्लेट के लिए स्पष्ट डेटा संदर्भ होगी। अब चाइल्ड टेम्पलेट में हम कुछ ऐसा कर सकते हैं
<template name="childTemplate">
<h2>My profession is {{profession}}</h2>
<h3>My hobby is {{hobby}}</h3>
</template>
टेम्पलेट सहायक
टेम्प्लेट हेल्पर्स ब्लेज़ का एक अनिवार्य हिस्सा हैं और एक टेम्प्लेट में व्यापारिक तर्क और प्रतिक्रिया दोनों प्रदान करते हैं। यह याद रखना महत्वपूर्ण है कि टेम्प्लेट हेल्पर्स वास्तव में प्रतिक्रियात्मक संगणनाएं हैं जो कि जब भी उनकी निर्भरताएं बदलती हैं, पुनर्मिलन होती हैं। आपकी आवश्यकताओं के आधार पर, टेम्प्लेट हेल्पर्स को विश्व स्तर पर परिभाषित किया जा सकता है या एक विशेष टेम्प्लेट में स्कूप किया जा सकता है। प्रत्येक टेम्पलेट सहायक परिभाषा दृष्टिकोण के उदाहरण नीचे दिए गए हैं।
- एक टेम्पलेट के लिए टेम्प्लेट हेल्पर का उदाहरण।
पहले अपने टेम्पलेट को परिभाषित करें:
<template name="welcomeMessage">
<h1>Welcome back {{fullName}}</h1>
</template>
फिर टेम्पलेट सहायक को परिभाषित करें। यह मान लेता है कि टेम्पलेट के डेटा संदर्भ में पहले नाम और अंतिम नाम गुण है।
Template.welcomeMessage.helpers({
fullName: function() {
const instance = Template.instance();
return instance.data.firstName + ' ' + instance.data.lastName
},
});
- एक वैश्विक टेम्पलेट सहायक का उदाहरण (यह सहायक किसी भी टेम्पलेट के भीतर से इस्तेमाल किया जा सकता है)
पहले सहायक को पंजीकृत करें:
Template.registerHelper('equals', function(item1, item2) {
if (!item1 || !item2) {
return false;
}
return item1 === item2;
});
साथ equals परिभाषित सहायक, मैं अब किसी भी टेम्पलेट के भीतर इसका इस्तेमाल कर सकते हैं:
<template name="registration">
{{#if equals currentUser.registrationStatus 'Pending'}}
<p>Don't forget to complete your registration!<p>
{{/if}}
</template>
