🌿 👍🏻 👩‍👦 JSON टेम्पलेट: आप केवल JSONT कर सकते हैं 😢 ⚡️ 😘

सबसे पहले, JSON टेम्पलेट JSON नहीं है।
दूसरे, अगर आपको पता नहीं है कि JSON क्या है या यह कैसा दिखता है, तो यहां बेहतर देखें।

अनुभाग और दोहराता अनुभाग

JSON टेम्पलेट में अनुभाग अधिकांश कार्य करते हैं। वर्गों के बारे में जानने के लिए बस दो महत्वपूर्ण विचार हैं:

अनुभाग मौजूद होने पर ही अनुभाग की सामग्री प्रदर्शित होती है।
यह खंड गुंजाइश को परिभाषित करता है, जो इसमें जोड़े गए किसी भी डेटा के लिए रूट सेक्शन है।

खंड

{.section item} If this section exists, display this {.end}

दोहराने वाला खंड

 {.repeated section items} If there are any items, repeat this info for each item {.end}

वैकल्पिक अनुभाग

 {.repeated section items} This stuff shows for each item. {.alternates with} ------ *show this dashed line in between each item* {.end}

या निर्देश

अनुभागों और दोहराए जाने वाले अनुभागों में उपयोग किया जा सकता है। इसका उपयोग अमान्य स्थिति प्रदर्शित करने के लिए किया जाता है, उदाहरण के लिए, यदि खंड मौजूद नहीं है:

 {.section item} Item exists! {.or} Item does not exist :( {.end}

संदर्भ सूचकांक (@)

@ एक तत्व को गुंजाइश में लिंक करता है - जैसे कि 'यह' जावास्क्रिप्ट में
यह आमतौर पर HTML कोड प्रदर्शित करने के लिए उपयोग किया जाता है, अगर प्रदर्शित करने के लिए कुछ है।

आइए निम्नलिखित उदाहरण पर एक नज़र डालें:

 <div class="title">{title}</div>

इस स्थिति में, यदि {title} मौजूद नहीं है, तो HTML में एक खाली DIV लिखा जाएगा:

 <div class="title"></div>

इससे बचने के लिए, निर्देश निम्नानुसार लिखे जा सकते हैं:

 {.section title}<div>{@}</div>{.end}

परिणामस्वरूप, यदि कोई नाम नहीं है, तो HTML में कुछ भी नहीं लिखा गया है।

लघु

आमतौर पर, संग्रह के प्रत्येक तत्व (उदाहरण के लिए: एक ब्लॉग) में एक संबंधित छवि होती है।
इस पोस्ट के URL के माध्यम से थंबनेल को प्रकाशन के लिए बांधा गया है, इसलिए इस तक पहुंच काफी आसान है:

प्रत्येक छवि को कई चौड़ाई विकल्पों के साथ प्राप्त किया जा सकता है:

 original, 1500w, 1000w, 750w, 500w, 300w, 100w

एक छवि से जुड़े संग्रह आइटम की उपस्थिति के लिए एक विशेष परीक्षण भी है। यह HTML में खाली टैग के साथ समाप्त नहीं होता है।

 {.main-image?}{.end}

उदाहरण के लिए:

 {.main-image?}<img src="" />{.end}

यदि टेम्पलेट को मुख्य छवि की उपस्थिति की उम्मीद है, भले ही यह लोड हो या न हो, आप या निर्देश का उपयोग कर सकते हैं:

 {.main-image?} <img src="" /> {.or} <img src="[fallback-img-URL]" /> {.end}

बहुवचन

शब्द "S" को समाप्त करता है अगर मान> 1

 You have {num} message{num|pluralize}.

यदि मूल्य> 1 पर समाप्त होने वाले शब्द "ES" को जोड़ता है

 They suffered {num} loss{num|pluralize es}.

संज्ञा और क्रिया के बीच संबंध को सुगम बनाता है

 There {num|pluralize is are} {num} song{num|pluralize}.

स्वयं का विकल्प (पहला मान असाइन किया गया है यदि मान = 1, दूसरा यदि मान> 1)

 {num-people|pluralize/It depends/They depend} on {num-things} thing{num-things|pluralize}.

एक उदाहरण अधिक जटिल है:

 {.repeated section num} {.plural?} There are {@} people here. {.or singular?} There is one person here. {.or} There is nobody here. {.end} {.end}

डेटा स्वरूपण

तारीख और समय

YUI में दिनांक प्रारूप के अनुसार दिनांक स्वरूपण संभव है

 {addedOn|date %A, %B %d}

या ट्विटर शैली में

 {addedOn|timesince}

लाइन प्रारूप

html - skips html टैग (<,>, और)

 {[string]|html}

htmltag - html टैग और उद्धरण चिह्नों (<,>, &, "") को छोड़ देता है

 {[string]|htmltag}

slugify - पाठ को लोअरकेस में कनवर्ट करता है, अल्फ़ान्यूमेरिक वर्णों और अंडरस्कोर को छोड़कर सब कुछ हटाता है, रिक्त स्थान को हाइन्सेंस में परिवर्तित करता है।

 {[string]|slugify}

स्मार्टइपेंट - स्मार्ट टाइपोग्राफिक HTML विराम चिह्नों में सरल ASCII विराम चिह्नों का अनुवाद करता है (स्रोत: http://daringfireball.net/projects/smartypants/ )

 {[string]|smartypants}

विधेय

यह JSON टेम्प्लेट के लिए स्क्वरस्पेस से विशिष्ट ऐड-ऑन की एक श्रृंखला है। विशिष्ट परिस्थितियों के लिए कोड को अनुकूलित करने के लिए टेस्ट। स्क्वरस्पेस एक बहुत ही प्रेरणादायक बात है, मैं इसके बारे में अगले लेख में लिखूंगा। यह तब होता है जब हम उनके उत्पाद के विकासात्मक भाग से परिचित होते हैं जिसे हमें JSON टेम्पलेट में ज्ञान की आवश्यकता होती है।

सभी इस तरह काम करते हैं:

 {.predicate-name?} code if the predicate test returns true {.or} code if it the test is not true {.end}

आमतौर पर इस्तेमाल की जाने वाली भविष्यवाणी:

क्या संग्रह तत्व (या संग्रह स्वयं) में एक छवि (थंबनेल) है?

 {.main-image?}

क्या संग्रह आइटम का विवरण है?

 {.excerpt?}

क्या संग्रह आइटम में टिप्पणियां हैं?

 {.comments?}

क्या संग्रह आइटम में डिस्कस टिप्पणी है?

 {.disqus?}

स्क्वरस्पेज़ ब्लॉक की भविष्यवाणी करता है

क्या तत्व में एक विशिष्ट ब्लॉक प्रकार है?

 {.promote[blockName]?}

उपलब्ध [ब्लॉकनेम] परीक्षण (नीचे दिए गए किसी एक प्रकार के साथ [ब्लॉकनेम] को बदलें):

 map, embed, image, code, quote, twitter, link, video, foursquare, instagram, form

नेविगेशन पैटर्न की भविष्यवाणी

क्या यह नेविगेशन बाहरी लिंक है?

 {.external-link?}

क्या यह नेविगेशन आइटम एक फ़ोल्डर है?

 {.folder?}

अन्य भविष्यवाणी करता है

क्या इस संग्रह आइटम में स्थान की जानकारी है?

 {.location?}

क्या यह संग्रह आइटम इवेंट है?

 {.event?}

उन्नत JSONT

स्थिरांक

चरित्र-मुक्त स्थान जोड़ें:

 {.space}

टैब जोड़ें:

 {.tab}

लाइन ब्रेक (/ n) जोड़ें:

 {.newline}

मेटा डेटा जोड़ें:

 {.meta-left} and {.meta-right}

JSONT कोड टिप्पणी करना

 Hello {# Comment} There

मेटा डेटा अनुकूलन

 <%.meta-left%>Hello<%.meta-right%> = HTML: <%Hello%>.

निष्कर्ष (या निष्कर्ष की तरह कुछ)

आप उन टेम्प्लेट को लोड करने के लिए स्वरूपण का उपयोग कर सकते हैं जो किसी विशिष्ट स्वरूपण चर के भीतर डेटा का उपयोग करते हैं। समावेश '%' से शुरू होता है और टेम्प्लेट फ़ाइलों को लोड करता है।

 {owner|%user-profile.jsont}

यदि कथन (विस्तार)

एक ऐसा खंड बनाता है, जो 'if' अगर सत्य (सत्य की स्थिति = सत्य) है, तो उसका मूल्य है। नोट: दायरा सीमित न करें।

 {.if property.nestedProperty} Hello World {.end}

आप विफल परीक्षणों को संभालने के लिए {.or} ऑपरेटर का उपयोग कर सकते हैं।

डिबगिंग

 {.Debug?}Rendered in 3 seconds{.end} { "debug" : true|false }

हालाँकि मैंने आपको शुरुआत में JSON और XML पोस्ट पर भेजा था । कौन सा बेहतर है? , अभी भी यहां JSON कोड का एक उदाहरण दें।

अच्छा जसन

 { "widget" : { "widget-title" : "Navigation", "widget-id" : 1452345, "widget-type" : "nav", "base-url" : "http://joshkill.com", "items" : [ { "title" : "Home", "description" : "Home is where the heart is", "icon" : "btn-home.png", "url" : "home.html" }, { "title" : "Services", "description" : "We do it all, then some", "icon" : "btn-services.png", "url" : "services.html" }, { "title" : "Contact", "description" : "Let's work together!", "icon" : "btn-contact.png", "url" : "contact.html" } ] } }

बदसूरत JSON (लाइन द्वारा लाइन)

 { "widget" : { "widget-title" : "Navigation", "widget-id" : 1452345, "widget-type" : "nav", "base-url" : "http://joshkill.com", "items" : [ { "title" : "Home", "description" : "Home is where the heart is", "icon" : "btn-home.png", "url" : "home.html" }, { "title" : "Services", "description" : "We do it all, then some", "icon" : "btn-services.png", "url" : "services.html" }, { "title" : "Contact", "description" : "Let's work together!", "icon" : "btn-contact.png", "url" : "contact.html" } ] }}

क्षेत्र

मैं गुंजाइश के बारे में बात करने की कोशिश करूंगा, यह एक सरल अवधारणा है।

दायरा निर्धारित करने का सबसे स्पष्ट उदाहरण कंप्यूटर पर फ़ोल्डर संरचना है जब एक फ़ाइल खोजने की कोशिश की जाती है। JSON में, एक चर जिसमें अन्य चर होते हैं, एक कंप्यूटर फ़ोल्डर के समान होता है। जब आप किसी भी फ़ोल्डर पर क्लिक करते हैं, तो हमारे पास फ़ाइलों तक पहुंच होती है। इसी तरह, जब JSON में एक वैरिएबल स्कोप में होता है, तो हमारे अंदर दूसरे वेरिएबल्स की सीधी पहुंच होती है।

निम्नलिखित JSON उदाहरण पर विचार करें:

 { "items": [ { "fullUrl": "/notebook/a-post-a-post", "title": "A Post! A Post!", "data": { "commentCount": 0, "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt aliquam tortor eu volutpat. Sed sem mauris, faucibus a hendrerit non, vulputate non dolor. Morbi fermentum tortor et lectus ultrices vulputate. Morbi tincid boblong sipe..." } }, { "fullUrl": "/notebook/blog-ideas", "title": "Blog Ideas", "data": { "commentCount": 0, "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt aliquam tortor eu volutpat. Sed sem mauris, faucibus a hendrerit non, vulputate non dolor. Morbi fermentum tortor et lectus ultrices vulputate. Morbi rhoncus faucibus diam ..." } } ] }

आइटम चर में अन्य चर होते हैं। और "आइटम" के अंदर, "डेटा" चर में अन्य चर भी होते हैं। आप उन्हें फ़ोल्डर के रूप में सोच सकते हैं।

जब हम JSON सेक्शन का उपयोग करते हैं, तो यह प्रभाव वैसा ही होता है जब आप कंप्यूटर पर फोल्डर को खोलते हैं, आपके पास फाइलों की सीधी पहुंच होती है।

ठीक है, अब कार्रवाई में JSON टेम्पलेट का दायरा देखें:

उदाहरण

यदि हम प्रत्येक तत्व के लिए "बॉडी" जोड़ना चाहते हैं, तो हम इसे लिख सकते हैं:

 {.repeated section items} {data.body} {.end}

या हम चर को "डेटा" के दायरे में रख सकते हैं:

 {.repeated section items} {.section data} {body} {.end} {.end}

"बॉडी" हमें हर जगह उपलब्ध हो सकती है, बस "" "पॉइंटर का उपयोग" बॉडी "वैरिएबल तक पहुँचने के लिए करें:

 {.repeated section items} {.section data} {.section body} {@} {.end} {.end} {.end}

विदेशी स्रोत? " हाँ ।" जानकारी कभी भी एक हाब पर प्रकाशित नहीं हुई थी - "। हाँ" क्या एक निरंतरता होगी? - "। हाँ"

JSON टेम्पलेट: आप केवल JSONT कर सकते हैं