Handlebars.js 4.0

Expressions




handlebars

Expressions

हैंडलबार एक्सप्रेशंस हैंडलबार्स टेम्पलेट की मूल इकाई हैं। आप उन्हें {{mustache}} में अकेले उपयोग कर सकते हैं, उन्हें हैंडलबार हेल्पर को पास कर सकते हैं, या हैश तर्कों में मान के रूप में उपयोग कर सकते हैं।

मूल उपयोग

सरल हैंडलबार अभिव्यक्ति एक साधारण पहचानकर्ता है:
<h1>{{title}}</h1>
इस अभिव्यक्ति का अर्थ है "वर्तमान संदर्भ में title संपत्ति को देखें"। ब्लॉक मददगार वर्तमान संदर्भ में हेरफेर कर सकते हैं, लेकिन वे एक अभिव्यक्ति के मूल अर्थ को नहीं बदलते हैं।
दरअसल, इसका मतलब है " title लिए एक सहायक की तलाश करें, फिर उपरोक्त करें", लेकिन हम जल्द ही इसे प्राप्त करेंगे।
हैंडलबार एक्सप्रेशंस डॉट-अलग किए गए पथ भी हो सकते हैं।
<h1>{{article.title}}</h1>
इस अभिव्यक्ति का अर्थ है "वर्तमान संदर्भ में article संपत्ति article । फिर परिणाम में title संपत्ति देखें"।
हैंडलबार्स एक पदावनत / वाक्यविन्यास का भी समर्थन करता है, इसलिए आप उपरोक्त खाका लिख ​​सकते हैं:
<h1>{{article/title}}</h1>
पहचानकर्ता निम्नलिखित के अलावा कोई भी यूनिकोड वर्ण हो सकता है:
व्हाट्सप्प ! # " % & ' ( ) * + ; / ; < @ [ \ ] ^ ` { | } ~
ऐसी संपत्ति का संदर्भ देने के लिए जो वैध पहचानकर्ता नहीं है, आप खंड-शाब्दिक संकेतन का उपयोग कर सकते हैं: [
{{#each articles.[10].[#comments]}}
  <h1>{{subject}}</h1>
  <div>
    {{body}}
  </div>
{{/each}}
ऊपर दिए गए उदाहरण में, टेम्पलेट each पैरामीटर को इस जावास्क्रिप्ट के बराबर समझेगा: articles[10]['#comments']
आप एक पथ-शाब्दिक में एक समापन ] शामिल नहीं कर सकते हैं, लेकिन अन्य सभी वर्ण निष्पक्ष खेल हैं।
जावास्क्रिप्ट-शैली के तार, " और ' , का भी उपयोग किया जा सकता है बनाम [ जोड़े।
हैंडलबार HTML-एस्केप मान {{expression}} द्वारा लौटाया गया है। यदि आप नहीं चाहते हैं कि हैंडलबार्स मान से बच जाएं, तो "ट्रिपल-स्टैश", {{{
{{{foo}}}

सहायकों

एक हैंडलबार हेल्पर कॉल एक सरल पहचानकर्ता है, जिसके बाद शून्य या अधिक पैरामीटर (अंतरिक्ष द्वारा अलग किया गया) होता है। प्रत्येक पैरामीटर एक हैंडलबार अभिव्यक्ति है।
{{{link story}}}
इस मामले में, link एक हैंडल हेल्पर का नाम है, और कहानी सहायक के लिए एक पैरामीटर है। हैंडलबार "मूल उपयोग" में ऊपर वर्णित तरीके से मापदंडों का मूल्यांकन करता है।
Handlebars.registerHelper('link', function(object) {
  var url = Handlebars.escapeExpression(object.url),
      text = Handlebars.escapeExpression(object.text);

  return new Handlebars.SafeString(
    "<a href='" + url + "'>" + text + "</a>"
  );
});
यदि आप सहायक से HTML लौटा रहे हैं, तो आपको एक हैंडलबार्स SafeString को वापस करना चाहिए यदि आप नहीं चाहते कि यह डिफ़ॉल्ट रूप से बच जाए। SafeString का उपयोग करते समय सभी अज्ञात या असुरक्षित डेटा को मैन्युअल रूप से escapeExpression विधि से बच जाना चाहिए।
आप हैंडलबार हेल्पर्स के लिए एक साधारण स्ट्रिंग, संख्या, या बूलियन को पैरामीटर के रूप में भी पास कर सकते हैं।
{{{link "See more..." story.url}}}
इस मामले में, हैंडलबार्स लिंक हेल्पर दो मापदंडों को पारित करेंगे: स्ट्रिंग "See more..." और वर्तमान संदर्भ में story.url का मूल्यांकन करने का परिणाम है।
Handlebars.registerHelper('link', function(text, url) {
  url = Handlebars.escapeExpression(url);
  text = Handlebars.escapeExpression(text);

  return new Handlebars.SafeString(
    "<a href='" + url + "'>" + text + "</a>"
  );
});
आप story.text के मूल्य के आधार पर गतिशील पाठ के साथ सटीक उसी सहायक का उपयोग कर सकते हैं।
{{{link story.text story.url}}}
हैंडलबार हेल्पर्स अपने अंतिम पैरामीटर (प्रलेखन में हैश तर्क के रूप में संदर्भित) के रूप में कुंजी-मूल्य जोड़े का एक वैकल्पिक अनुक्रम प्राप्त कर सकते हैं:
{{{link "See more..." href=story.url class="story"}}}
हैश तर्कों में कुंजियाँ सरल पहचानकर्ता होनी चाहिए, और मान हैंडलबार अभिव्यक्ति हैं। इसका मतलब है कि मूल्य सरल पहचानकर्ता, पथ या स्ट्रिंग्स हो सकते हैं।
Handlebars.registerHelper('link', function(text, options) {
  var attrs = [];

  for (var prop in options.hash) {
    attrs.push(
        Handlebars.escapeExpression(prop) + '="'
        + Handlebars.escapeExpression(options.hash[prop]) + '"');
  }

  return new Handlebars.SafeString(
    "<a " + attrs.join(" ") + ">" + Handlebars.escapeExpression(text) + "</a>"
  );
});
हैंडलबार्स अंतिम पैरामीटर के रूप में सहायकों को हैश तर्क जैसे अतिरिक्त मेटाडेटा प्रदान करता है।
हैंडलबार्स टेम्पलेट के ब्लॉक के साथ एक सहायक को आमंत्रित करने के लिए एक तंत्र भी प्रदान करता है। ब्लॉक हेल्पर्स तब शून्य या अधिक बार ब्लॉक कर सकते हैं जिसे वह चुनता है।
और जानें: ब्लॉक हेल्पर्स

Subexpressions

हैंडलबार्स सबटेक्शंस के लिए समर्थन प्रदान करता है, जो आपको एक ही मूंछ के भीतर कई सहायकों को आमंत्रित करने की अनुमति देता है, और बाहरी सहायकों को तर्क के रूप में आंतरिक सहायक चालान के परिणामों में पास करता है। कोष्ठक को कोष्ठकों द्वारा सीमांकित किया जाता है।
{{outer-helper (inner-helper 'abc') 'def'}}
इस स्थिति में, inner-helper को स्ट्रिंग तर्क 'abc' साथ इनवाइट किया जाएगा, और जो भी inner-helper फंक्शन रिटर्न देगा, वह inner-helper के पहले तर्क के रूप में पास हो जाएगा (और 'def' दूसरे के रूप में पास हो जाएगा) outer-helper तर्क)।

व्हॉट्सएप कंट्रोल

टेम्प्लेट व्हाट्सएप को ब्रेस द्वारा ~ वर्ण जोड़कर किसी भी मूंछें कथन के दोनों ओर से छोड़ा जा सकता है। जब उस तरफ सभी व्हाट्सएप को लागू किया जाता है, तो उस तरफ पहले हैंडलबार अभिव्यक्ति या गैर-व्हाट्सएप चरित्र को हटा दिया जाएगा।
{{#each nav ~}}
  <a href="{{url}}">
    {{~#if test}}
      {{~title}}
    {{~^~}}
      Empty
    {{~/if~}}
  </a>
{{~/each}}
इस संदर्भ के साथ:
{
  nav: [
    {url: 'foo', test: true, title: 'bar'},
    {url: 'bar'}
  ]
}
आउटपुट के परिणाम में न्यूज़लाइन और फ़ॉर्मेटिंग व्हाट्सएप:
<a href="foo">bar</a><a href="bar">Empty</a>
यह स्ट्रिपिंग लाइनों के डिफ़ॉल्ट व्यवहार का विस्तार करता है जो "स्टैंडअलोन" हेल्पर्स (केवल एक ब्लॉक हेल्पर, टिप्पणी या आंशिक और व्हाट्सएप) हैं।
{{#each nav}}
  <a href="{{url}}">
    {{#if test}}
      {{title}}
    {{^}}
      Empty
    {{/if}}
  </a>
{{~/each}}
प्रस्तुत करेगा
<a href="foo">
    bar
</a>
<a href="bar">
    Empty
</a>

भागने

हैंडलबार्स सामग्री को दो तरीकों में से एक में बचाया जा सकता है, इनलाइन एस्केप या रॉ ब्लॉक हेल्पर्स। इनलाइन बच के साथ मूंछ ब्लॉक को उपसर्ग करके बनाया गया है। {{{{ मूंछों वाले ब्रेसिज़ का उपयोग करके कच्चे ब्लॉक बनाए जाते हैं।
\{{escaped}}
{{{{raw}}}}
  {{escaped}}
{{{{/raw}}}}
कच्चे ब्लॉक उसी तरह से काम करते हैं जैसे कि अन्य ब्लॉक हेल्पर्स बाल सामग्री के भेद के साथ शाब्दिक स्ट्रिंग के रूप में व्यवहार करते हैं।