मैं मूंछों में एक और / कैसे पूरा करूं?

Question

यह बल्कि अजीब लगता है कि मैं यह नहीं कर सकता कि मूंछों में यह कैसे करना है। क्या यह समर्थित है?

यह मेरी कोशिश पर दुख की बात है:

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

यह स्पष्ट रूप से सही नहीं है, लेकिन प्रलेखन में ऐसा कुछ भी उल्लेख नहीं किया गया है। "और" शब्द का उल्लेख भी नहीं किया गया है :(

इसके अलावा, मूंछें इस तरह से क्यों बनाई गई हैं? क्या इस तरह की बात को बुरा माना जाता है? क्या यह मुझे मॉडल में डिफ़ॉल्ट मान सेट करने के लिए मजबूर करने की कोशिश कर रहा है? उन मामलों के बारे में क्या जहां यह संभव नहीं है?

Comments

"क्यों मूंछें इस तरह से डिजाइन की गई हैं?" मुझे भी यकीन नहीं हो रहा है, लेकिन मुझे लगता है कि यह विचार है कि एक टेम्प्लेटिंग लैंग्वेज बस होनी चाहिए: टेम्प्लेट लिखने के लिए एक भाषा, यानी ऐसी चीजें जो उनके द्वारा उत्पादित आउटपुट की तरह दिखती हैं, बस उन छेदों के साथ जहां चर बिट्स जाते हैं। टेम्प्लेट लैंग्वेज में लॉजिक डालना टेम्प्लेट्स को अधिक जटिल बनाता है, और जब आपको लॉजिक बिट्स को संभालने के लिए पहले से ही प्रोग्रामिंग लैंग्वेज मिल गई हो, तो परेशान क्यों?

— पॉल डी। वेट

@ पॉलड.वाइट "लॉजिक-लेस" का वास्तव में अर्थ है "गैर-मनमाना कोड," मुझे लगता है। कोड में सही व्यू लॉजिक डालना उतना ही बुरा है जितना कि किसी टेम्प्लेट में नॉन-व्यू लॉजिक डालना। मूंछें उस को पूरा करने के लिए एक नंगे न्यूनतम तर्क प्रदान करने की कोशिश करती हैं।

— jpmc26

या मूंछों के बजाय हैंडलबार का उपयोग करें । लिखने में सक्षम होने के नाते, उदाहरण के {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}लिए अधिक पठनीय है, बहुत साफ है, और अभी भी प्रस्तुति है। "लॉजिक-लेस" एक दिशानिर्देश है, इसके लिए स्ट्रेटजैकेट होना जरूरी नहीं है।

— स्काईपेज पेज

हो सकता है कि यह एक बहुमुखी-पर्याप्त अस्थायी इंजन नहीं है जब एक ओपी कहता है "यह मेरा दुखद प्रयास है [...] यह स्पष्ट रूप से सही नहीं है ..." और फिर स्वीकृत उत्तर उस कोड की कॉपी-पेस्ट है :)। ओपी पर कोई निर्णय या जवाब नहीं; बस परmustache

— dwanderson

Answer 1

यह है कि आप कैसे करते हैं / यदि मूंछों में हैं (पूरी तरह से समर्थित):

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

या आपके मामले में:

{{#author}}
  {{#avatar}}
    <img src="{{avatar}}"/>
  {{/avatar}}
  {{^avatar}}
    <img src="/images/default_avatar.png" height="75" width="75" />
  {{/avatar}}
{{/author}}

डॉक्स में उल्टे खंडों की तलाश करें: https://github.com/janl/mustache.js

Comments

मूंछें डॉक्स उल्लसित हैं। "हम इसे" लॉजिक-कम "कहते हैं क्योंकि बयान, क्लॉज़ या लूप्स के लिए कोई प्रश्न नहीं हैं।" येयेया ....

— बॉक्सिंग

@ बॉक्सिंग, तकनीकी रूप से आप सही हैं, उल्टे अनुभाग एक तार्किक कथन है, क्योंकि यह टैग मान की जाँच करता है। लेकिन, मुझे लगता है कि यहां यह बात स्पष्ट है कि दोनों कथनों का स्पष्ट मूल्यांकन किया जाना चाहिए, बजाए एकल / अन्य के। मूल रूप से, मूंछें संरचना को मजबूर करती हैं और if (condition){ //do something}उसके बाद ए if (!condition){//do something else}। इसके अलावा, तर्क की मात्रा जो किसी तर्क-आधारित भाषा की तुलना में तर्क में बहुत कम हो सकती है। अस्तित्व या गैर-अस्तित्व ही चेक हैं, यानी यदि आप टैग के मान 5 के बराबर हैं और फिर उस टैग के कोड में आते हैं, तो आप चेक नहीं कर सकते।

— मंडे नोव

@ MandM yea ... तो इसमें तर्क है लेकिन यह कुछ भी उपयोगी नहीं कर सकता: P

— बॉक्सिंग

यह सिर्फ आपको तर्क के साथ खिलवाड़ करने से रोकता है। बहुत से नेस्टेड होने पर / किसी अन्य के अंदर अगर / नहीं तो गलतफहमी का संकेत है

— Tebe

@ बॉक्सिंग आप moustache.js के साथ लूप के लिए कर सकते हैं (कम से कम ngFor-ish लूप)

— aloisdg codidact.com पर जा रहा है।

Answer 2

यह कुछ ऐसा है जिसे आप "नियंत्रक" में हल करते हैं, जो कि तर्कहीन टेंपलेटिंग का बिंदु है।

// some function that retreived data through ajax
function( view ){

   if ( !view.avatar ) {
      // DEFAULTS can be a global settings object you define elsewhere
      // so that you don't have to maintain these values all over the place
      // in your code.
      view.avatar = DEFAULTS.AVATAR;
   }

   // do template stuff here

}

यह वास्तव में एक बहुत अच्छा है तो छवि यूआरएल या अन्य मीडिया को बनाए रखना जो आपके टेम्प्लेट में बदल नहीं सकता है या हो सकता है, लेकिन कुछ के लिए उपयोग हो रहा है। बिंदु टेंप्लेस टनल विज़न को अनलॉर्न करने के लिए है, एक अवतार img url अन्य टेम्प्लेट में इस्तेमाल होने के लिए बाध्य है, क्या आप उस टेम्प्लेट पर url को बनाए रखने जा रहे हैं या एक सिंगल डेफ़ॉल्ट सेटिंग्स ऑब्जेक्ट? ;)

एक अन्य विकल्प निम्नलिखित है:

// augment view
view.hasAvatar = !!view.avatar;
view.noAvatar = !view.avatar;

और टेम्पलेट में:

{{#hasAvatar}}
    SHOW AVATAR
{{/hasAvatar}}
{{#noAvatar}}
    SHOW DEFAULT
{{/noAvatar}}

लेकिन यह तर्कहीन गतिरोध के पूरे अर्थ के खिलाफ जा रहा है। यदि आप ऐसा करना चाहते हैं, तो आप लॉजिकल टेम्प्लेटिंग चाहते हैं और आपको मूंछों का उपयोग नहीं करना चाहिए, हालाँकि इसे स्वयं इस अवधारणा को सीखने का उचित मौका दें;)

Comments

धन्यवाद। यह एक शानदार प्रतिक्रिया है! यह वास्तव में मुझे जावास्क्रिप्ट कोड की संरचना में "सामान करने के लिए" के बारे में अन्य संरचनात्मक पहलुओं के साथ भी मदद करता है।

— एग्वारी

इस उत्तर में {{/ # hasAvatar}} और {{/ # noAvatar}} होना चाहिए {{/ hasAvatar}} और {{/ noAvatar}}।

— मुलहून

Answer 3

आपके अन्य विवरण इस तरह दिखना चाहिए (नोट करें ^):

{{^avatar}}
 ...
{{/avatar}}

मूंछों में इसे 'इनवर्टेड सेक्शन' कहा जाता है।

Comments

ध्यान दें कि आपको # और ^ दोनों की आवश्यकता नहीं है, यह सिर्फ ^ ^ 'नहीं' केस के लिए है

— zappan

यह नवीनतम संस्करण में काम नहीं करता है। ज़प्पन सही है, आपको केवल ^

— सिमोनमोरली

Answer 4

आप दृश्य में एक सहायक को परिभाषित कर सकते हैं। हालांकि, सशर्त तर्क कुछ सीमित है। मोक्सी-स्टैंसिल ( https://github.com/dcmox/moxyscript-stencil ) इसे "पैरामीटर किए गए" सहायक, जैसे:

{{isActive param}}

और देखने में:

view.isActive = function (पाथ: स्ट्रिंग) {रिटर्न पाथ === यह.पथ? "वर्ग = 'सक्रिय'": ''}

Answer 5

ध्यान दें, आप {{.}}वर्तमान संदर्भ आइटम को रेंडर करने के लिए उपयोग कर सकते हैं ।

{{#avatar}}{{.}}{{/avatar}}

{{^avatar}}missing{{/avatar}}