हैंडलबार.जेएस एल्स इफ

Question

मैं क्लाइंट साइड व्यू रेंडरिंग के लिए Handlebars.js का उपयोग कर रहा हूं। यदि एल्स महान काम करता है, लेकिन मुझे 3 तरह की शर्त का सामना करना पड़ा है जिसके लिए ELSE IF की आवश्यकता है:

यह काम नहीं करता है:

{{#if FriendStatus.IsFriend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

ईएलएसई आईएफ को हैंडलबार से कैसे करें?

Comments

हैंडलबार्स अपडेट पर नज़र रखें, ऐसा लगता है कि इसे जल्द ही लागू कर दिया जाएगा: github.com/wycats/handlebars.js/pull/892

— याकूब वैन लिंगेन

Answer 1

हैंडलबार {{else if}}3.0.0 के रूप में ब्लॉक का समर्थन करता है ।

हैंडलबार्स v3.0.0 या अधिक:

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

हैंडलबार्स v3.0.0 से पहले, हालांकि, आपको या तो एक सहायक को परिभाषित करना होगा जो ब्रांचिंग लॉजिक या नेस्ट ifस्टेटमेंट को मैन्युअल रूप से हैंडल करता है :

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

Comments

हैंडलबार्स में एल्सीफ (या फिर यदि) न होने की बात यह है कि आप अपने टेम्पलेट में बहुत अधिक तर्क डाल रहे हैं। दूसरे शब्दों में, आपको इसे छोटे टेम्पलेट्स में तोड़ने की आवश्यकता है?

— काज़िम ज़ैदी

@KazimZaidi, क्या होगा यदि आपके पास तीन से अधिक राज्यों के साथ डेटा का एक टुकड़ा है जिसमें प्रत्येक मामले में अलग प्रारूपण की आवश्यकता है? आप सीएसएस शैली को डेटा में ही लागू करने में सक्षम हो सकते हैं, लेकिन फिर आप अपने डेटा में दृश्य-स्तर की चिंताओं को बढ़ा रहे हैं। मैं एक / / ifif / endif निर्माण (या यहां तक ​​कि एक स्विच / मैच) के लिए समझदार मामलों की कल्पना कर सकता हूं।

— ड्रू नोक

इसे फिर से देखते हुए, मुझे लगता है कि यह विशेषता बाइंडिंग के माध्यम से किया जा सकता है।

— काजिम जैदी

मुझे लगता है कि पसंदीदा विधि बूलियन झंडे को पारित करना और उन्हें सशर्त करना है। झंडे को सही तरीके से सेट करने के लिए इसका आप पर निर्भर करता है कि केवल एक ही स्थिति सही का मूल्यांकन करती है। कोई ज़रूरत नहींelse if

— chovy

मेरा सुझाव है कि आप अपने व्यवसाय तर्क को प्रस्तुति से अलग करने के लिए एक सहायक कार्य करते हैं।

— मैक्स होजेस

Answer 2

मैं आमतौर पर इस फॉर्म का उपयोग करता हूं:

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}

Comments

अच्छी टिप, धन्यवाद। क्या यह डिफ़ॉल्ट रूप से प्रतिक्रियाशील होगा?

— काइलमक्लेरेन

केवल 1 और के साथ बहुत अच्छा लग रहा है, लेकिन जितना अधिक आपके पास है, अगर अंतिम की अंतिम सूची बंद हो जाती है, तो -{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}

— jbyrd

नहीं, यह "क्लीनर" नहीं है यह बदसूरत है।

— जीन b।

Answer 3

हैंडलबार्स अब {{else if}}3.0.0 का समर्थन करता है। इसलिए, आपका कोड अब काम करना चाहिए।

आप "सशर्त" के तहत एक उदाहरण देख सकते हैं (थोड़ा जोड़ा के साथ यहाँ संशोधित {{else}}:

    {{#if isActive}}
      <img src="star.gif" alt="Active">
    {{else if isInactive}}
      <img src="cry.gif" alt="Inactive">
    {{else}}
      <img src="default.gif" alt="default">
    {{/if}}

http://handlebarsjs.com/block_helpers.html

Comments

यह नया उत्तर होना चाहिए!

— साद मलिक

मेरे लिए काम नहीं करता है (टेम्पलेट में सिंटैक्स त्रुटि)। उल्का 1.2.0.2

— ड्रैगनमनल

@dragonmnl हैंडलबार का कौन सा संस्करण 1.2.0.2 का उपयोग कर रहा है? सुनिश्चित करें कि आप 3.0 का उपयोग कर रहे हैं।

— डॉन ओ

मैं डिफ़ॉल्ट संस्करण का उपयोग कर रहा हूं। मैं हैंडलबार संस्करण की जांच कैसे करूं?

— ड्रैगनमनल

@dragonmnl ऐसा लगता है कि उल्का स्पेसबार नामक अपनी टेम्पलेट भाषा का उपयोग करता है । अगर ऐसा है, तो मुझे यकीन नहीं है कि यह {{else if}}सिंटैक्स का समर्थन करता है ।

— डॉन ओ

Answer 4

हैंडलबार्स की भावना यह है कि यह "लॉजिकलेस" है। कभी-कभी यह हमें ऐसा महसूस कराता है कि हम इसके साथ लड़ रहे हैं, और कभी-कभी हम तर्कहीन / भद्दे तर्क के साथ समाप्त होते हैं। आप एक सहायक लिख सकते हैं ; कई लोग "बेहतर" सशर्त ऑपरेटर के साथ हैंडलबार को बढ़ाते हैं या मानते हैं कि यह कोर का हिस्सा होना चाहिए । मुझे लगता है, हालांकि, इसके बजाय,

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

आप अपने मॉडल में चीजों को व्यवस्थित करना चाह सकते हैं ताकि आपके पास यह हो सके,

{{#if is_friend }}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{/if}}

{{#if is_not_friend_yet }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{/if}}

{{#if will_never_be_my_friend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

बस यह सुनिश्चित करें कि इनमें से केवल एक झंडे कभी सच हो। संभावना है, यदि आप इसे if/elsif/elseअपने विचार में उपयोग कर रहे हैं, तो आप शायद इसे कहीं और भी उपयोग कर रहे हैं, इसलिए ये चर शायद अतिश्योक्तिपूर्ण न हों।

इसे दुबला रखें।

Comments

मुझे यकीन नहीं है कि यह कितना अच्छा अभ्यास है, लेकिन यह मेरे लिए आज आया है जो 3 अलग-अलग राज्यों को देख रहा है और मैं इस पर आधारित एक समाधान का उपयोग करके समाप्त हुआ (उनके अन्य तर्क आवश्यक नहीं हैं क्योंकि वे सभी के खिलाफ जाँच कर रहे हैं एक मान) stackoverflow.com/questions/15008564/… तो, #if _is_friend के बजाय, आप बहुत ही सरल सहायक (उनके उत्तर में) के साथ एक स्ट्रिंग का उपयोग कर सकते हैं; #if friend_type "is_friend" और #if friend_type "is_not_friend_yet" है

— डायलन रीच

यह उत्तर वही है जो मैं सबसे अच्छा समाधान पूर्व हैंडलबार 3.0 पर विचार करूंगा, मुझे लगता है कि अतिरिक्त एचटीएमएल बेहतर है क्योंकि डोम ट्री में तर्क को रटना करने की कोशिश के विपरीत।

— डेविड ओ'रगन

Answer 5

मैंने यह सरल सहायक लिखा है:

Handlebars.registerHelper('conditions', function (options) {
    var data = this;
    data.__check_conditions = true;
    return options.fn(this);
});


Handlebars.registerHelper('next', function(conditional, options) {
  if(conditional && this.__check_conditions) {
      this.__check_conditions = false;
      return options.fn(this);
  } else {
      return options.inverse(this);
  }
});

यह हैंडलबार में चेन ऑफ रिस्पॉन्सिबिलिटी पैटर्न जैसा है

उदाहरण:

    {{#conditions}}
        {{#next condition1}}
            Hello 1!!!
        {{/next}}
        {{#next condition2}}
            Hello 2!!!
        {{/next}}
        {{#next condition3}}
            Hello 3!!!
        {{/next}}
        {{#next condition4}}
            Hello 4!!!
        {{/next}}
    {{/conditions}}

यह एक और नहीं है लेकिन अगर कुछ मामलों में यह आपकी मदद कर सकता है)

Answer 6

निर्मित हेल्पर्स

#if

यदि हेल्पर किसी ब्लॉक को सशर्त रूप से प्रस्तुत करने के लिए उपयोग कर सकता है। यदि इसका तर्क गलत, अपरिभाषित, अशक्त, "", 0, या [] देता है, तो हैंडलबार ब्लॉक को प्रस्तुत नहीं करेगा।

टेम्पलेट

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Unknown Author</h1>
  {{/if}}
</div>

जब आप उपरोक्त इनपुट के लिए निम्न इनपुट पास करते हैं

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz"
}

Answer 7

नमस्कार, मेरे पास केवल एक MINOR वर्गनाम संपादित है, और अब तक यह है कि iv ने इसे कैसे विभाजित किया है। मुझे लगता है कि मुझे सहायक को बहुस्तरीय मापदंडों में पारित करने की आवश्यकता है,

server.js

app.engine('handlebars', ViewEngine({
        "helpers":{
                isActive: (val, options)=>{
                    if (val === 3 || val === 0){
                        return options.fn(this)
                    }
                } 
        }
}));

header.handlebars

<ul class="navlist">
          <li   class="navitem navlink {{#isActive 0}}active{{/isActive}}"
                ><a href="#">Home</a></li>
          <li   class="navitem navlink {{#isActive 1}}active{{/isActive}}"
                ><a href="#">Trending</a></li>
          <li   class="navitem navlink {{#isActive 2}}active{{/isActive}}"
                ><a href="#">People</a></li>
          <li   class="navitem navlink {{#isActive 3}}active{{/isActive}}"
                ><a href="#">Mystery</a></li>
          <li class="navitem navbar-search">
            <input type="text" id="navbar-search-input" placeholder="Search...">
            <button type="button" id="navbar-search-button"><i class="fas fa-search"></i></button>
          </li>
        </ul>