(「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();
これが
生きた例です。
Microformatテンプレート
マークアップ内のテキストまたは属性値には、「口ひげ」括弧内の式が含まれる場合があります:
{{ ...expr ...}}
。
リストに入力すると、そのような式は評価され、文字列値に置き換えられます。
式で使用可能な特定の変数
- this-オブジェクト-現在のリスト項目。
$index
現在のリストアイテムの番号、インデックス。$first
true
これが最初の要素でtrue
場合はtrue
。$last
これが最後の要素でtrue
場合はtrue
。$length
入力配列内のエントリの数、数。
条件付き包含
繰り返し可能なテンプレート内の要素は、条件付きとして宣言できます。 これを行うには、属性
if="...expr..."
があるかどうかを記述します。 リストを生成するとき、式が評価され、それが「真」であれば要素が表示され、そうでなければ削除されます。
繰り返し可能なプラグインのホームページ-
ここ繰り返し可能なソースコードは、最初にリンクを見逃した人のためのものです。
(function ($) { function repeatable(el) { var $el = $(el); var template = $el.find(">*").remove(); var nrTemplate = template.length > 1 ? $(template[1]) : null;
成功。