निम्नलिखित सरलीकृत आंकड़ों पर विचार करें:
var viewData = {
itemSize: 20,
items: [
'Zimbabwe', 'dog', 'falafel'
]
};
और एक हैंडलबार टेम्पलेट:
{{#each items}}
<div style="font-size:{{itemSize}}px">{{this}}</div>
{{/each}}
यह काम नहीं करेगा क्योंकि eachलूप के भीतर , पैरेंट स्कोप सुलभ नहीं है - कम से कम किसी भी तरह से नहीं जो मैंने कोशिश की है। मैं उम्मीद कर रहा हूँ कि हालांकि यह करने का एक तरीका है!
जवाबों:
इसे प्राप्त करने के दो वैध तरीके हैं।
../../प्रॉपर्टी के नाम से जुड़कर , आप पेरेंट स्कोप को रेफर कर सकते हैं।
{{#each items}}
<div style="font-size:{{../itemSize}}px">{{this}}</div>
{{#if this.items.someKey}}
<div style="font-size:{{../../itemSize}}px">{{this}}</div>
{{/if}}
{{/each}}
आप दोहराव के माध्यम से कई स्तरों तक जा सकते हैं ../। उदाहरण के लिए, दो स्तरों का उपयोग करने के लिए ../../key।
अधिक जानकारी के लिए, रास्तों पर हैंडलबार्स प्रलेखन देखें ।
@root@rootसंपत्ति पथ के लिए तैयार होने से, आप सबसे ऊपरी क्षेत्र से नीचे की ओर नेविगेट कर सकते हैं (जैसा कि कैबलरॉग के उत्तर में दिखाया गया है )।
अधिक जानकारी के लिए, @data वैरिएबल पर हैंडलबार्स प्रलेखन देखें ।
नई विधि डॉट नोटेशन का उपयोग कर रही है, स्लैश नोटेशन को हटा दिया गया है ( http://handlebarsjs.com/express.html )।
तो, माता-पिता के तत्वों तक पहुंचने की वास्तविक विधि निम्नलिखित हैं:
@root.grandfather.father.element
@root.father.element
अपने विशिष्ट उदाहरण में, आप उपयोग करेंगे:
{{#each items}}
<div style="font-size:{{@root.viewData.itemSize}}px">{{this}}</div>
{{/each}}
आधिकारिक प्रलेखन ( http://handlebarsjs.com/builtin_helpers.html ) से एक अन्य विधि उपनाम का उपयोग कर रही है
प्रत्येक सहायक ब्लॉक पैरामीटर का भी समर्थन करता है, ब्लॉक में कहीं भी नामित संदर्भों की अनुमति देता है।
{{#each array as |value key|}} {{#each child as |childValue childKey|}} {{key}} - {{childKey}}. {{childValue}} {{/each}} {{/each}}एक कुंजी और मान वैरिएबल बनाएगा जो बच्चे गहन चर संदर्भों की आवश्यकता के बिना एक्सेस कर सकते हैं। ऊपर दिए गए उदाहरण में, {{कुंजी}}> {{@ .. / कुंजी}} के समान है, लेकिन कई मामलों में अधिक पठनीय है।