handlebars.js - Simplest way to add one class or another -
हैंडलबार के साथ, एक
उदाहरण सहायक:
{{# प्रत्येक आइटम}} & lt; div class = "{{यहाँ क्या है?}}" & Gt; ... & lt; / div & gt; {{/ प्रत्येक}
... जहां हम वर्ग के नाम के रूप में भी
या अजीब
चाहते हैं (हां, फिर, मुझे पता है कि यह सीएसएस के साथ किया जा सकता है; मैं एक मौजूदा साइट के सीएसएस के साथ एकीकरण कर रहा हूं जो इसके बजाय वैकल्पिक कक्षाओं का उपयोग करता है।)
< डिवा क्लास = "पोस्ट-टेक्स्ट" आइटमप्रॉप = "टेक्स्ट">
एक हैंडलेबर्स नौसिख के रूप में, मैं कुछ भी अंतर्निहित नहीं देख रहा हूं, लेकिन एपीआई एक सहायक को जोड़ने में आसान बनाता है जो आपको एक मनमानी से चयन करने देता है - आइटम की लम्बाई सूची, इस तरह:
हैंडलबार। रजिस्टरहाल्पर ('चक्र', फ़ंक्शन (इंडेक्स) {अनुक्रमणिका = अनुक्रमणिका% (arguments.length - 2); // 2 छोड़ने के लिए `इंडेक्स 'और अंतिम तर्क एचबी में वापसी तर्क जोड़ता है [सूचकांक 1];});
इसका प्रयोग करना होगा:
{{# प्रत्येक आइटम}} & lt; div class = "{{cycle @index 'even' 'अजीब '}} "& gt; ... & lt; / div & gt; {{/ प्रत्येक}
हैंडलबार। रजििस्टरहाल्पर ('चक्र', फ़ंक्शन (इंडेक्स) {अनुक्रमणिका = अनुक्रमणिका% (तर्क। लांघ - 2); / / -2 'सूचकांक' और अंतिम तर्क छोड़ने के लिए एचबी वापसी तर्क जोड़ता है [सूचकांक 1];}); Var आइटम = ["एक", "दो", "तीन", "चार", "पाँच"]; Var टेम्पलेट = हैंडलेबर्स.कॉइल (document.getElementById ("टेम्पलेट")। InnerHTML); Var html = टेम्पलेट ({आइटम: आइटम}); Document.body.insertAdjacentHTML ("पहले", html);
.even {color: blue; } .odd {color: green; }
& lt; script src = "// cdnjs.cloudflare.com/ajax/libs/handlebars जे एस / 2.0.0 / handlebars.min.js "& gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट id = "template" type = "text / x-handlebars-template" & gt; {{#each आइटम}} & lt; div class = "{{cycle @index 'भी' 'अजीब'}}" & gt; {{this}} & lt; / div & gt; या यदि मैं रोटेशन में तीन कक्षाएं चाहता / चाहती हूं:
{{# प्रत्येक आइटम}} & lt; div class = "{{cycle @index 'one' 'दो' 'तीन'}}" & gt; ... & lt; / div & gt; {{/ प्रत्येक}
हैंडलबार। रजििस्टरहाल्पर ('चक्र', फ़ंक्शन (इंडेक्स) {अनुक्रमणिका = अनुक्रमणिका% (तर्क। लांघ - 2); / / -2 'सूचकांक' और अंतिम तर्क छोड़ने के लिए एचबी वापसी तर्क जोड़ता है [सूचकांक 1];}); Var आइटम = ["एक", "दो", "तीन", "चार", "पाँच"]; Var टेम्पलेट = हैंडलेबर्स.कॉइल (document.getElementById ("टेम्पलेट")। InnerHTML); Var html = टेम्पलेट ({आइटम: आइटम}); Document.body.insertAdjacentHTML ("पहले", html);
.one {color: blue; }। दो {रंग: हरा; }। तीन {रंग: लाल; }
& lt; script src = "// cdnjs.cloudflare.com/ajax/libs/handlebars जे एस / 2.0.0 / handlebars.min.js "& gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट id = "template" type = "text / x-handlebars-template" & gt; {{#each आइटम}} & lt; div class = "{{cycle @index 'एक' 'दो' 'तीन'}}" & gt; {{this}} & lt; / div & gt; {{/ Each}}
Comments
Post a Comment