दोहराने योग्य, सूचियों को प्रस्तुत करने का एक और तरीका

("वेब पृष्ठों के छोटे मशीनीकरण" श्रृंखला से)

रिपीटेबल क्या है?

दोहराने योग्य डेटा सरणियों पर किसी भी प्रकार की सूचियों, तालिकाओं आदि के आउटपुट (जनसंख्या) का एक तरीका है। यह तंत्र
मार्कअप कोड में वर्णित टेम्पलेट का उपयोग करता है (इसके विपरीत, कहते हैं, {{मूंछ}} टेम्पलेट)।

अभिव्यक्ति और सशर्त समावेश का समर्थन किया जाता है। और कोड की 90 लाइनों में यह सब।

बार-बार होने वाली कार्यक्षमता हर "वयस्क" वेब फ्रेमवर्क में है। लेकिन अगर किसी कारण से आप राक्षसों के साथ शामिल नहीं होना चाहते हैं, तो यहां एक तंत्र है, जैसा कि वे कहते हैं, पूछ नहीं है।

उदाहरण

मान लीजिए कि ऐसा कोई डेटा है:

var data = [ { name: "Olga", age: 20, email: "aaa@example.com" }, { name: "Peter", age: 30, email: "bbb@example.com" }, { name: "Ivan", age: 15, email: "ccc@example.com" }, ]; 

और हमें कुछ इस तरह से कटौती करने की आवश्यकता है:

 <ul id="people"> <li><a href="mailto:{{this.email}}">{{this.name}}</a> <b if="this.age > 18">18+</b> </li> <li>No data available</li> </ul> 

पहला <li> वास्तव में एक रिकॉर्डिंग टेम्प्लेट है। इनपुट सेट में प्रत्येक प्रविष्टि के लिए, इस तत्व को वाइल्डकार्ड और गोलू के साथ दोहराया जाएगा। दूसरा <li> प्रदर्शित किया जाएगा यदि दोहराव एक खाली सरणी के साथ "खिलाया" है।

यदि हमारे पास यह सब वर्णित है तो हमारी सूची की वास्तविक जनसंख्या एक पंक्ति है:

 var list = $("ul#people").repeatable(); // declaring the repeatable list.value = data; // that's data population, sic! 

यहाँ एक जीता जागता उदाहरण है ।

माइक्रोफ़ॉर्मेट टेम्प्लेट

मार्कअप या विशेषता मान के अंदर के पाठ में "मूंछ" कोष्ठक में एक अभिव्यक्ति हो सकती है: {{ ...expr ...}} ।
सूची भरते समय, ऐसे भावों का मूल्यांकन किया जाएगा और उनके स्ट्रिंग मानों को बदल दिया जाएगा।

विशिष्ट चर एक्सप्रेशन में उपलब्ध हैं

• this - वस्तु - वर्तमान सूची आइटम।
• $index - संख्या, वर्तमान सूची आइटम का सूचकांक;
• $first - true अगर यह पहला तत्व है;
• $last - true अगर यह अंतिम तत्व है;
• $length - संख्या, इनपुट सरणी में प्रविष्टियों की संख्या।

सशर्त समावेशन

एक दोहराने योग्य टेम्पलेट के अंदर किसी भी तत्व को सशर्त घोषित किया जा सकता है। ऐसा करने के लिए, वर्णन करें कि क्या इसकी विशेषता है if="...expr..." । सूची बनाते समय, अभिव्यक्ति का मूल्यांकन किया जाएगा और यदि यह "सत्य" है, तो तत्व प्रदर्शित किया जाएगा, यदि नहीं हटाया गया।

दोहराने योग्य प्लगइन होमपेज - यहां
दोहराने योग्य स्रोत कोड यहां उन लोगों के लिए पूरी तरह से है जो शुरुआत में लिंक से चूक गए थे:

 /** * @author Andrew Fedoniouk <andrew@terrainformatica.com> * @name jQuery repeatable() * @license WTFPL (http://sam.zoy.org/wtfpl/) * @purpose template-less population of repeatables (lists) */ (function ($) { function repeatable(el) { var $el = $(el); var template = $el.find(">*").remove(); var nrTemplate = template.length > 1 ? $(template[1]) : null; // "no records" template template = $(template[0]); var compiled = {}; // compiled expressions var vector = null; // data var index = 0; // current index being processed //function evalExpr(str) { return eval("(" + str + ")"); } function compiledExpr(str) { var expr = compiled[str]; if( !expr ) compiled[str] = expr = new Function("$index","$first","$last","$total", "return (" + str + ")"); return expr; } function replace(text, data) { function subst(a, b) { var expr = compiledExpr(b); var s = expr.call(data, index, index==0,index==vector.length - 1, vector.length); return s === undefined ? "" : s; } return text.replace(/{{(.*)}}/g, subst); } function instantiate(el, data) { var attributes = el.attributes; for (var i = 0; i < attributes.length; ++i) { var attribute = attributes[i]; if (attribute.name == "if") { var str = attribute.value; var expr = compiledExpr(str); var tokeep = expr.call(data, index, index == 0, index == vector.length - 1, vector.length); if (!tokeep) { el.parentElement.removeChild(el); return; } } else if (attribute.value.indexOf("{{") >= 0) attribute.value = replace(attribute.value, data); } for (var nn, n = el.firstChild; n; n = nn) { var nn = n.nextSibling; if (n.nodeType == 1) // element instantiate(n, data); else if (n.nodeType == 3) // text { var t = n.textContent; if (t.indexOf("{{") >= 0) n.textContent = replace(t, data); } } } function getValue() { return vector; } function setValue(newValue) { vector = newValue; var t = template[0]; if( !vector || vector.length == 0 ) { $el.empty(); if(nrTemplate) $el.append(nrTemplate); // no records } else { var fragment = document.createDocumentFragment(); for (index = 0; index < vector.length; ++index) { var nel = t.cloneNode(true); instantiate(nel, vector[index]); fragment.appendChild(nel); } $el.empty(); $el.append(fragment); } } el.getValue = getValue; el.setValue = setValue; // redefine its 'value' property, setting value to some array will cause popupaltion of the repeatable by that data. try { Object.defineProperty(el, "value", { get: getValue, set: setValue, enumerable: true, configurable: true }); } catch(e) {} return el; } $.fn.repeatable = function () { var el = null; this.each(function () { el = repeatable(this); }); return el; // returns last matched element! }; })(jQuery); 

गुड लक।