Handlebars.js 4.0 - Block Helpers

ब्लॉक हेल्पर्स




handlebars

ब्लॉक हेल्पर्स

ब्लॉक हेल्पर्स कस्टम पुनरावृत्तियों और अन्य कार्यक्षमता को परिभाषित करना संभव बनाते हैं जो नए संदर्भ के साथ पारित ब्लॉक को लागू कर सकते हैं।

बुनियादी ब्लॉक

प्रदर्शन उद्देश्यों के लिए, आइए एक ब्लॉक हेल्पर को परिभाषित करें जो ब्लॉक को आमंत्रित करता है जैसे कि कोई सहायक मौजूद नहीं था।
<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{#noop}}{{body}}{{/noop}}
  </div>
</div>
noop हेल्पर ("ऑपरेशन नहीं" के लिए छोटा) एक विकल्प हैश प्राप्त करेगा। यह विकल्प हैश में एक फ़ंक्शन ( options.fn ) होता है जो एक सामान्य संकलित हैंडलबार टेम्पलेट की तरह व्यवहार करता है। विशेष रूप से, फ़ंक्शन एक संदर्भ लेगा और एक स्ट्रिंग लौटाएगा।
Handlebars.registerHelper('noop', function(options) {
  return options.fn(this);
});
हैंडलबार हमेशा वर्तमान संदर्भ के साथ सहायकों को आमंत्रित करता है, इसलिए आप वर्तमान संदर्भ में ब्लॉक का मूल्यांकन करने के लिए इसके साथ ब्लॉक को आमंत्रित कर सकते हैं।
इस तरह से परिभाषित कोई भी सहायक संदर्भ में परिभाषित क्षेत्रों पर वरीयता लेगा। एक सहायक द्वारा नकाबपोश किए गए क्षेत्र तक पहुंचने के लिए, एक पथ संदर्भ का उपयोग किया जा सकता है। संदर्भ ऑब्जेक्ट पर noop नामक फ़ील्ड के ऊपर के उदाहरण में इसका उपयोग किया जाएगा:
{{./noop}}

बुनियादी ब्लॉक बदलाव

वाक्यविन्यास को बेहतर ढंग से समझने के लिए, आइए एक और ब्लॉक हेल्पर को परिभाषित करें जो लिपटे पाठ में कुछ मार्कअप जोड़ता है।
<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{#bold}}{{body}}{{/bold}}
  </div>
</div>
bold हेल्पर अपने टेक्स्ट को बोल्ड बनाने के लिए मार्कअप जोड़ेगा। पहले की तरह, फ़ंक्शन इनपुट के रूप में एक संदर्भ लेगा और एक स्ट्रिंग लौटाएगा।
Handlebars.registerHelper('bold', function(options) {
  return new Handlebars.SafeString(
      '<div class="mybold">'
      + options.fn(this)
      + '</div>');
});

सहायक के with

सहायक के with प्रदर्शित करता है कि आपके सहायक को एक पैरामीटर कैसे पास किया जाए। जब एक सहायक को एक पैरामीटर के साथ बुलाया जाता है, तो इसे जिस भी संदर्भ में पास किया जाता है, उसके साथ इसे लागू किया जाता है।
<div class="entry">
  <h1>{{title}}</h1>
  {{#with story}}
    <div class="intro">{{{intro}}}</div>
    <div class="body">{{{body}}}</div>
  {{/with}}
</div>
यदि आपके JSON ऑब्जेक्ट के किसी अनुभाग में गहरी नेस्टेड गुण हैं, तो आप इस सहायक की तरह सहायक पा सकते हैं, और आप मूल नाम को दोहराने से बचना चाहते हैं। उपरोक्त टेम्पलेट JSON के साथ उपयोगी हो सकता है जैसे:
{
  title: "First Post",
  story: {
    intro: "Before the jump",
    body: "After the jump"
  }
}
एक हेल्पर को इस तरह से लागू करना बहुत कुछ है जैसे कि noop हेल्पर को लागू करना। मददगार पैरामीटर ले सकते हैं, और मापदंडों का मूल्यांकन वैसे ही किया जाता है जैसे कि सीधे {{mustache}} ब्लॉकों के अंदर उपयोग किए जाते हैं।
Handlebars.registerHelper('with', function(context, options) {
  return options.fn(context);
});
पैरामीटर्स सहायकों को इस क्रम में दिए जाते हैं कि वे पास हो जाएं, उसके बाद विकल्प हैश।

सिंपल आईटर

ब्लॉक हेल्पर्स के लिए एक सामान्य उपयोग-मामला कस्टम पुनरावृत्तियों को परिभाषित करने के लिए उनका उपयोग कर रहा है। वास्तव में, सभी हैंडलबार बिल्ट-इन हेल्पर्स को नियमित हैंडलबार्स ब्लॉक हेल्पर्स के रूप में परिभाषित किया जाता है। आइए एक नजर डालते हैं कि each हेल्पर में बिल्ट-इन कैसे काम करता है।
<div class="entry">
  <h1>{{title}}</h1>
  {{#with story}}
    <div class="intro">{{{intro}}}</div>
    <div class="body">{{{body}}}</div>
  {{/with}}
</div>
<div class="comments">
  {{#each comments}}
    <div class="comment">
      <h2>{{subject}}</h2>
      {{{body}}}
    </div>
  {{/each}}
</div>
इस मामले में, हम टिप्पणी ऐरे में प्रत्येक तत्व के लिए एक बार पारित ब्लॉक को आमंत्रित करना चाहते हैं।
Handlebars.registerHelper('each', function(context, options) {
  var ret = "";

  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + options.fn(context[i]);
  }

  return ret;
});
इस मामले में, हम पारित पैरामीटर में आइटम पर पुनरावृति करते हैं, प्रत्येक आइटम के साथ एक बार ब्लॉक को आमंत्रित करते हैं। जैसा कि हम पुनरावृत्ति करते हैं, हम एक स्ट्रिंग परिणाम का निर्माण करते हैं, और फिर इसे वापस करते हैं।
इस पैटर्न का उपयोग अधिक उन्नत पुनरावृत्तियों को लागू करने के लिए किया जा सकता है। उदाहरण के लिए, आइए एक इटेरेटर बनाएं जो <ul> आवरण बनाता है, और प्रत्येक परिणामी तत्व को <li> में लपेटता है।
{{#list nav}}
  <a href="{{url}}">{{title}}</a>
{{/list}}
आप संदर्भ के रूप में कुछ इस तरह से इस टेम्पलेट का मूल्यांकन करेंगे:
{
  nav: [
    { url: "http://www.yehudakatz.com", title: "Katz Got Your Tongue" },
    { url: "http://www.sproutcore.com/block", title: "SproutCore Blog" },
  ]
}
सहायक मूल each सहायक के समान है।
Handlebars.registerHelper('list', function(context, options) {
  var ret = "<ul>";

  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + "<li>" + options.fn(context[i]) + "</li>";
  }

  return ret + "</ul>";
});
अंडरस्कोर।जे या स्प्राउटकोर की रनटाइम लाइब्रेरी जैसी लाइब्रेरी का उपयोग करना इसे थोड़ा पूर्वव्यापी बना सकता है। उदाहरण के लिए, यहां स्प्राउटकोर की रनटाइम लाइब्रेरी का उपयोग करने जैसा लग सकता है:
Handlebars.registerHelper('list', function(context, options) {
  return "<ul>" + context.map(function(item) {
    return "<li>" + options.fn(item) + "</li>";
  }).join("\n") + "</ul>";
});

सशर्त,

ब्लॉक सहायकों के लिए एक और सामान्य उपयोग-मामला सशर्त बयानों का मूल्यांकन करना है। पुनरावृत्तियों के साथ, हैंडलबार्स के अंतर्निर्मित और unless नियंत्रण संरचना को नियमित हैंडलबार सहायकों के रूप में लागू नहीं किया जाता है।
{{#if isActive}}
  <img src="star.gif" alt="Active">
{{/if}}
नियंत्रण संरचनाएं आमतौर पर वर्तमान संदर्भ को नहीं बदलती हैं, इसके बजाय वे यह निर्णय लेते हैं कि कुछ चर के आधार पर ब्लॉक को लागू करना है या नहीं।
Handlebars.registerHelper('if', function(conditional, options) {
  if(conditional) {
    return options.fn(this);
  }
});
सशर्त लिखते समय, आप अक्सर HTML के एक ब्लॉक प्रदान करने के लिए टेम्पलेट्स के लिए यह संभव बनाना चाहेंगे कि सशर्त गलत का मूल्यांकन करने पर आपके सहायक को सम्मिलित करना चाहिए। हैंडलबार इस समस्या को हेल्पर्स को ब्लॉक करने के लिए else कार्यक्षमता प्रदान करके संभालता है।
{{#if isActive}}
  <img src="star.gif" alt="Active">
{{else}}
  <img src="cry.gif" alt="Inactive">
{{/if}}
Handlebars options.inverse रूप में खंड के लिए ब्लॉक प्रदान करता है। आपको else टुकड़े के अस्तित्व की जांच करने की आवश्यकता नहीं है: हैंडलबार इसे स्वचालित रूप से पहचान लेंगे और "नोप" फ़ंक्शन को पंजीकृत करेंगे।
Handlebars.registerHelper('if', function(conditional, options) {
  if(conditional) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});
हैंडलबार विकल्पों को हैश के गुणों के रूप में संलग्न करके ब्लॉक सहायकों को अतिरिक्त मेटाडेटा प्रदान करता है। अधिक उदाहरणों के लिए पढ़ते रहें।
अन्य मूंछों के भीतर बाद वाले सहायक कॉल को शामिल करके भी सशर्त जंजीरों को जकड़ा जा सकता है।
{{#if isActive}}
  <img src="star.gif" alt="Active">
{{else if isInactive}}
  <img src="cry.gif" alt="Inactive">
{{/if}}
बाद के कॉल में एक ही सहायक का उपयोग करना आवश्यक नहीं है, unless सहायक को किसी अन्य सहायक के साथ दूसरे हिस्से में उपयोग नहीं किया जा सकता है। जब सहायक मान अलग-अलग होते हैं, तो समापन मूंछ को उद्घाटन सहायक नाम से मेल खाना चाहिए।

हैश तर्क

नियमित सहायकों की तरह, ब्लॉक हेल्पर्स एक वैकल्पिक हैश को अपने अंतिम तर्क के रूप में स्वीकार कर सकते हैं। आइए list सहायक को फिर से देखें और हमारे द्वारा बनाए गए <ul> तत्व में किसी भी वैकल्पिक विशेषता को जोड़ना संभव होगा।
{{#list nav id="nav-bar" class="top"}}
  <a href="{{url}}">{{title}}</a>
{{/list}}
हैंडलबार्स options.hash रूप में अंतिम हैश प्रदान करता है। यह एक वैकल्पिक हैश को स्वीकार करते हुए, मापदंडों की एक चर संख्या को स्वीकार करना आसान बनाता है। यदि टेम्पलेट कोई हैश तर्क प्रदान नहीं करता है, तो हैंडलबार्स स्वचालित रूप से एक खाली ऑब्जेक्ट ( {} ) पास करेगा, इसलिए आपको हैश तर्कों के अस्तित्व की जांच करने की आवश्यकता नहीं है।
Handlebars.registerHelper('list', function(context, options) {
  var attrs = Object.keys(options.hash).map(function(key) {
    return key + '="' + options.hash[key] + '"';
  }).join(" ");

  return "<ul " + attrs + ">" + context.map(function(item) {
    return "<li>" + options.fn(item) + "</li>";
  }).join("\n") + "</ul>";
});
हैश तर्क स्थितिगत तर्क के कारण जटिलता के बिना ब्लॉक हेल्पर के लिए कई वैकल्पिक मापदंडों की पेशकश करने का एक शक्तिशाली तरीका प्रदान करते हैं।

ब्लॉक हेल्पर्स अपने बच्चे के टेम्प्लेट में निजी चर भी इंजेक्ट कर सकते हैं। यह अतिरिक्त जानकारी जोड़ने के लिए उपयोगी हो सकता है जो मूल संदर्भ डेटा में नहीं है।

उदाहरण के लिए, जब किसी सूची पर पुनरावृत्ति होती है, तो आप वर्तमान सूचकांक को एक निजी चर के रूप में प्रदान कर सकते हैं।

{{#list array}}
  {{@index}}. {{title}}
{{/list}}
Handlebars.registerHelper('list', function(context, options) {
  var out = "<ul>", data;

  if (options.data) {
    data = Handlebars.createFrame(options.data);
  }

  for (var i=0; i<context.length; i++) {
    if (data) {
      data.index = i;
    }

    out += "<li>" + options.fn(context[i], { data: data }) + "</li>";
  }

  out += "</ul>";
  return out;
});
data विकल्प के माध्यम से प्रदान किए गए निजी चर सभी अवरोही स्कोप में उपलब्ध हैं।
पैरेंट स्कोप में परिभाषित निजी चर को पथप्रदर्शित प्रश्नों के माध्यम से एक्सेस किया जा सकता है। पेरेंट इट्रेटर के index फ़ील्ड तक पहुँचने के लिए, @../index का उपयोग किया जा सकता है।
सुनिश्चित करें कि आप प्रत्येक सहायक में एक नया डेटा फ़्रेम बनाते हैं जो अपना स्वयं का डेटा असाइन करता है। अन्यथा, डाउनस्ट्रीम मददगार अप्रत्याशित रूप से अपस्ट्रीम वेरिएबल को म्यूट कर सकते हैं।
यह भी सुनिश्चित करें कि किसी मौजूदा डेटा ऑब्जेक्ट के साथ बातचीत करने के प्रयास से पहले data फ़ील्ड को परिभाषित किया गया है। निजी चर व्यवहार संवैधानिक रूप से संकलित है और कुछ टेम्पलेट इस क्षेत्र को नहीं बना सकते हैं।

पैरामीटर्स को ब्लॉक करें

हैंडलबार्स 3.0 में नया, सहायक सहायकों से नामित पैरामीटर प्राप्त करना संभव है।
{{#each users as |user userId|}}
  Id: {{userId}} Name: {{user.name}}
{{/each}}
इस विशेष उदाहरण में, user पास वर्तमान संदर्भ के समान मूल्य होगा और उपयोगकर्ता userId में पुनरावृत्ति के लिए सूचकांक मूल्य होगा।
यह नेस्टेड हेल्पर्स के लिए नाम संघर्ष से बचने की अनुमति देता है जो निजी चर के साथ हो सकता है।
{{#each users as |user userId|}}
  {{#each user.book as |book bookId|}}
    User Id: {{userId}} Book Id: {{bookId}}
  {{/each}}
{{/each}}
कई blockParams ब्लॉक पैरामीटर्स का समर्थन करते हैं और कोई भी कस्टम हेल्पर उन्हें blockParams विकल्प क्षेत्र के माध्यम से प्रदान कर सकता है।
Handlebars.registerHelper('block-params', function() {
  var args = [],
      options = arguments[arguments.length - 1];
  for (var i = 0; i < arguments.length - 1; i++) {
    args.push(arguments[i]);
  }

  return options.fn(this, {data: options.data, blockParams: args});
});
{{#block-params 1 2 3 as |foo bar baz|}}
  {{foo}} {{bar}} {{baz}}
{{/block-params}}
एक सहायक को लागू करता है जो किसी दिए गए ब्लॉक के भीतर नामित चर घोषणाओं के लिए अनुमति देता है। यह उदाहरण प्रस्तुत करना पर 1 2 3 आउटपुट होगा।
हेल्पर्स options.fn.blockParams माध्यम से टेम्प्लेट द्वारा संदर्भित ब्लॉक पैरामीटर की संख्या निर्धारित कर सकते हैं। options.fn.blockParams फ़ील्ड, जो एक पूर्णांक संख्या है। यह मान उस ब्लॉक पैरामीटर की संख्या को दर्शाता है जिसे चाइल्ड टेम्पलेट द्वारा संदर्भित किया जा सकता है। इस गणना से परे पैरामीटर को कभी संदर्भित नहीं किया जाएगा और यदि वांछित है तो सहायक द्वारा सुरक्षित रूप से छोड़ा जा सकता है। यह वैकल्पिक है और टेम्पलेट को पारित किए गए किसी भी अतिरिक्त पैरामीटर को चुपचाप अनदेखा कर दिया जाएगा।

कच्चे ब्लॉक

कच्चे ब्लॉक अनपेक्षित मूंछ ब्लॉक को संभालने के लिए आवश्यक टेम्पलेट्स के लिए उपलब्ध हैं।
{{{{raw-helper}}}}
  {{bar}}
{{{{/raw-helper}}}}
सामग्री की व्याख्या किए बिना हेल्पर raw-helper निष्पादन करेगा।
Handlebars.registerHelper('raw-helper', function(options) {
  return options.fn();
});
प्रस्तुत करेगा
{{bar}}