├── LICENSE
├── README.md
├── repeatable-test.htm
├── repeatable.jquery.json
└── repeatable.js
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 c-smile
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | repeatable
2 | ==========
3 |
4 | Repeatable "template-less" jQuery plugin
5 |
6 | # Introduction
7 |
8 | The Repeatable is template-less mechanism for populating various list, tables, etc. by arrays containing objects.
9 | Temlate-less here means that you don't need to use templates for your repeteables anywere except of markup itself.
10 |
11 | # Example
12 |
13 | Let's assume that you would want to populate (render) some list with some data stored as objects in some array:
14 |
15 | ```javascript
16 | var data = [
17 | { name: "Olga", age: 20, email: "aaa@example.com" },
18 | { name: "Peter", age: 30, email: "bbb@example.com" },
19 | { name: "Ivan", age: 15, email: "ccc@example.com" },
20 | ];
21 | ```
22 |
23 | Then with the Repeatable you can define your list in markup as:
24 |
25 | ```html
26 |
` above is so called record template - it will appear in the DOM for each element in the data array. Second `
` element will appear once and only if you will feed the repeatable by empty array.
33 |
34 | Having all these the Repeatable makes list population extremely simple:
35 |
36 | ```javascript
37 | var list = $("ul#people").repeatable(); // declaring the repeatable
38 | list.value = data; // that's data population, sic!
39 | ```
40 |
41 | Note `list.value = data;` above, by assigning array data to the value property of the repetable you are populating the list by the data.
42 |
43 |
44 | Live demo: http://terrainformatica.com/widgets.js/repeatable/repeatable-test.htm
45 |
46 | # Record template microformat
47 |
48 | Any text or attribute value in the repeatable section may contain expressions enclosed in "mustache" brackets `{{ ...expr ...}}`.
49 |
50 | While populating records each such expression will be executed and it's return value (string) will be put in the DOM replacing `{{...}}` placeholder as a whole.
51 |
52 | ## Environment variables
53 |
54 | In repeatable expressions following variables have special meaning:
55 |
56 | * `this` - refers to the record (object) being processed (rendered);
57 | * `$index` - number, index of current record;
58 | * `$first` - `true` if this is the first record;
59 | * `$last` - `true` if this is the last record;
60 | * `$length` - number, total number of records in the array.
61 |
62 | ## Conditionals
63 |
64 | Any element inside repeatable section can be declared as conditional by using `if="...expr..."` attribute. Expression defined by the attribute will be evaluated and if its result is "truthy" the element will be rendered, otherwise - removed from the DOM.
65 |
66 |
--------------------------------------------------------------------------------
/repeatable-test.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
32 |
33 |
34 |
35 |
36 |