यदि अंडरस्कोर .js टेम्प्लेट में स्टेटमेंट का उपयोग कैसे करें?

Question

मैं अंडरस्कोर का उपयोग कर रहा हूँ। टेम्पिंग फंक्शन और इस तरह एक टेम्प्लेट किया है:

<script type="text/template" id="gridItem">
    <div class="griditem <%= gridType %> <%= gridSize %>">
        <img src="<%= image %>" />
        <div class="content">
            <span class="subheading"><%= categoryName %></span>
            <% if (date) { %><span class="date"><%= date %></span><% }  %>
            <h2><%= title %></h2>
        </div>
    </div>
</script>

जैसा कि आप देख सकते हैं कि मेरे पास एक स्टेटमेंट है, क्योंकि मेरे सभी मॉडलों में दिनांक पैरामीटर नहीं होगा। हालाँकि ऐसा करने का यह तरीका मुझे एक त्रुटि देता हैdate is not defined । इसलिए, यदि कोई टेम्प्लेट में कथन हैं तो मैं कैसे कर सकता हूं?

Answer 1

यह काम कर जाना चाहिए:

<% if (typeof(date) !== "undefined") { %>
    <span class="date"><%= date %></span>
<% } %>

याद रखें कि अंडरस्कोर.जैस टेम्प्लेट में हैं ifऔर टैग forमें लिपटे हुए सिर्फ मानक जावास्क्रिप्ट सिंटैक्स हैं <% %>।

Comments

महान काम करता है, और बस पता चला है कि जेएस स्विच / केस स्टेटमेंट टेम्पलेट मार्कअप में भी अच्छी तरह से काम करते हैं।

— निक

बहुत बढ़िया जवाब। क्या आप यह भी बता सकते हैं कि जब मैं टेम्प्लेट का उपयोग कर रहा हूं तो मैं वैकल्पिक कक्षाओं का उपयोग कैसे कर सकता हूं? पहले <li> की तरह वर्ग a और अगला b प्राप्त करना चाहिए?

— BlackDivine

@BlackDivine मुझे पता है कि यह एक तरह की देरी है, लेकिन वैकल्पिक शैलियों के लिए आपको अपने सीएसएस को नहीं बदलना चाहिए :nth-child(even)और :nth-child(odd)सीएसएस चयनकर्ताओं का उपयोग करना चाहिए ।

— प्रार्थना

इसके समान दिखने वाले जावा स्क्रिप्टलेट्स का उपयोग जेपी में चर प्रदान करने के लिए किया जाता है

— डंगऑन हंटर

मैंने अंत {{}}} पर इस लाइन के साथ काम किया, क्योंकि मुझे <%%> रैपर बदलना पड़ा और यह अभी भी काम कर रहा था।

— 0v3rth3d4wn

Answer 2

यदि आप छोटे बयान पसंद करते हैं, तो आप इस शॉर्टहैंड का उपयोग कर सकते हैं:

<%= typeof(id)!== 'undefined' ?  id : '' %>

इसका मतलब है कि अगर यह वैध नहीं है और खाली है तो आईडी प्रदर्शित करें।

Comments

— टेनेरी

सशर्त ऑपरेटर , जिसे उपनाम "टर्नरी" मिलता है, क्योंकि यह एकमात्र सामान्य टर्नरी ऑपरेटर (तीन-ऑपरेंड) है।

— कीन

ध्यान दें कि इस उत्तर में प्रस्तावित तकनीक की एक छोटी सी कमी यह है कि आप फिर से स्ट्रिंग इंटरपोलेशन कर रहे हैं, जो आपके लिए हल करने वाले हैं। अभी तक, प्रत्येक संकलित कोड टैग की शुरुआत में _.templateसम्मिलित होता है ;। इस प्रकार, यह कथन के बीच टैगिंग को तोड़ सकता है, लेकिन अभिव्यक्ति के अंदर नहीं। से तुलना ;if(a){b;}else{c;}करें ;a?b;:c;।

— कीन

Answer 3

स्थिति और आपकी शैली के आधार पर, आप अपने टैग के अंदर प्रिंट का उपयोग भी कर सकते हैं <% %>, क्योंकि यह सीधे आउटपुट की अनुमति देता है। पसंद:

<% if (typeof(id) != "undefined") {
     print(id);
}
else {
    print('new Model');
} %>

और कुछ समागम के साथ मूल स्निपेट के लिए:

<% if (typeof(date) != "undefined") {
    print('<span class="date">' + date + '</span>');
} %>

Answer 4

यहाँ एक सरल है अगर / फिर underscore.js में जाँच करें, यदि आपको एक शून्य जाँच शामिल करने की आवश्यकता है।

<div class="editor-label">
    <label>First Name : </label>
</div>
<div class="editor-field">
    <% if(FirstName == null) { %>
        <input type="text" id="txtFirstName" value="" />
    <% } else { %>
        <input type="text" id="txtFirstName" value="<%=FirstName%>" />
    <% } %>
</div>

Comments

अशक्त अपरिभाषित के समान नहीं है, यह अभी भी एक त्रुटि पैदा करेगा

— xorinzor

इस मामले में, इससे कोई फर्क नहीं पड़ता, क्योंकि वह == का उपयोग करके मूल्य की जांच करता है, जो मूल्य को परिवर्तित करेगा। प्रकार-रूपांतरण के कारण निम्नलिखित कथन सत्य है: अशक्त == अपरिभाषित - इसका समर्थन नहीं है, बस कह रहा है।

— जोहान्स लुम्पे

मुझे लगता है कि इसका उपयोग करना बेहतर है_.isEmpty()

— निक बैरेट

Answer 5

ऊपर ब्लैकडिविन का जवाब देना (किसी के परिणामों को कैसे निकालना है) के बारे में, आपने पहले ही अपना जवाब पा लिया होगा (यदि हां, तो साझा न करने के लिए आप पर शर्म आती है!), लेकिन ऐसा करने का सबसे आसान तरीका मापांक ऑपरेटर का उपयोग करना है। उदाहरण के लिए, आप एक लूप में काम कर रहे हैं:

<% for(i=0, l=myLongArray.length; i<l; ++i) { %>
...
<% } %>

उस लूप के भीतर, बस अपने सूचकांक का मूल्य जांचें (i, मेरे मामले में):

<% if(i%2) { %>class="odd"<% } else { %>class="even" <% }%>

ऐसा करने से मेरे सूचकांक के शेष भाग को दो से विभाजित किया जाएगा (प्रत्येक सूचकांक पंक्ति के लिए 1 और 0 के बीच टॉगल करें)।

Answer 6

आप _.isUndefined की कोशिश कर सकते हैं

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>

Comments

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

— कीन

Answer 7

से यहाँ :

"आप उस ऑब्जेक्ट के माध्यम से डेटा ऑब्जेक्ट के गुणों को संदर्भित कर सकते हैं, बजाय उन्हें चर के रूप में एक्सेस करने के।" ओपी के मामले के लिए यह काम करेगा (अन्य संभावित समाधानों की तुलना में काफी छोटे परिवर्तन के साथ):

<% if (obj.date) { %><span class="date"><%= date %></span><% }  %>

Answer 8

अशक्त मूल्यों की जाँच करने के लिए आप आधिकारिक दस्तावेज_.isNull से उपयोग कर सकते हैं

isNull_.isNull(object)

यदि वस्तु का मूल्य शून्य है, तो सही है।

_.isNull(null);
=> true
_.isNull(undefined);
=> false