Clever Geek Handbook

繰り返し可能な、リストをレンダリングする別の方法

（「Webページの小さな機械化」シリーズから）



反復可能とは何ですか？



反復可能は、データ配列上のあらゆる種類のリスト、テーブルなどの出力（人口）の方法です。 このメカニズム

{{mustache}}テンプレートとは異なり、マークアップコード自体で説明されているテンプレートを使用します。



式と条件付き包含がサポートされています。 そして、これらすべてを90行のコードで行います 。



反復可能な機能は、すべての「アダルト」Webフレームワークにあります。 しかし、何らかの理由でモンスターと関わりたくない場合は、ここで、彼らが言うように、求めていないメカニズムがあります。



例



そのようなデータがあるとしましょう： 

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>



実際には記録テンプレートです。 入力セットの各エントリについて、この要素はワイルドカードとgoulosで繰り返されます。 Repetableに空の配列が「供給」されると、2番目の<li>



が表示されます。



すべてを説明すると、リストの実際の人口は1行になります。 

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


これが生きた例です。



Microformatテンプレート





マークアップ内のテキストまたは属性値には、「口ひげ」括弧内の式が含まれる場合があります： {{ ...expr ...}}



。

リストに入力すると、そのような式は評価され、文字列値に置き換えられます。

式で使用可能な特定の変数




条件付き包含


繰り返し可能なテンプレート内の要素は、条件付きとして宣言できます。 これを行うには、属性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);


成功。


More articles:


All Articles