Skip to content

Commit 43b76c4

Browse files
committed
Notation
1 parent c4ab56e commit 43b76c4

12 files changed

Lines changed: 109 additions & 63 deletions

File tree

README.md

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -202,9 +202,14 @@ The resulting markup would be:
202202
</table>
203203
```
204204

205-
**OR Alternatives:** If it is not certain that a token will resolve or exist, alternatives can be supplied, separated by a pipe `|` character. These will by tried from left-to-right until a key resolves. If none resolve, then an empty string results.
205+
**OR Alternatives:** If it is not certain that a token will resolve or exist, alternatives can be supplied, separated by a pipe `|` character. These will by tried from left-to-right until a key resolves. If none resolve, then an empty string results. Or, if a string is provided as the final alternative, it will be inserted. **NOTE:** OR Alternatives will *not* work within a [combineString transformer](#transformers).
206206
```html
207-
<samp>{{ tryThis|thenThis|default }}</samp>
207+
<samp>{{ tryThis|thenThis|"Default text" }}</samp>
208+
```
209+
210+
**OBJECT Notation:** Tokens can be JavaScript-compliant Object dot.notation or braced[addressing]. These can be used exactly as a simple token would be used, including in OR Alternatives.
211+
```html
212+
<samp>{{ tryThis.value|thenThis[value]|"Not Found!" }}</samp>
208213
```
209214

210215
***
@@ -232,5 +237,39 @@ Transformers allow for modification of a value prior to insertion into the targe
232237
| absent | `{{ absent:token }}` | Inserts `true` or `false` if value does not exist (the obverse of `exists`). |
233238
| combineString | `{{ combineString:('foo',token1,'bar',token2,…) }}` | Combines arbitrary strings and/or token values (e.g. to construct an URL). See the [transformer](/example/simple-javascript/transformer.html) example. |
234239

240+
At runtime, custom transformers can be supplied to the microdata-template instance for immediate use within templated markup:
241+
```javascript
242+
import templater from "./path/to/microdata-template.js";
243+
244+
templater.setTransformer("formatDate", function(value, index) {
245+
var time = Date.parse(value);
246+
var date = new Date(isNaN(time) ? isNaN(value) ? Date.now() : value : time);
247+
return date.toLocaleString();
248+
});
249+
250+
// then: <samp>{{ formatDate:myData.creationDate }}</samp>
251+
```
252+
235253
***
236-
### Public API
254+
### Public API
255+
Once instantiated in the web client code, the microdata-template can be addressed via a variety of public methods, getters, and setters. These methods can be addressed within the scope of the instantiation, or via the browser's JavaScript console.
256+
```javascript
257+
// In pre-ES6 implementations, the code is exposed to the global namespace:
258+
var templater = window.MicrodataTemplate.init();
259+
templater.getVerson(); // returns current version, e.g. "2.2.0"
260+
261+
// In ES6 implementations, the import code does not require init()
262+
import templater from "./path/to/microdata-template.js";
263+
templater.getVersion(); // returns current version, e.g. "2.2.0"
264+
265+
```
266+
267+
| Method Name | Argument(s) | Description |
268+
|-------------|-------------|-------------|
269+
| `init` | *none* | Returns an instance of the microdata-template. |
270+
| `render` | *element, data* | Populates the HTML element template with data. |
271+
| `clear` | *element, callback* | Removes dynamically populated content, retaining template. |
272+
| `refresh` | *element, data* | Makes current a previously rendered template. |
273+
| `setTransformer` | *name, func* | Provides for a custom transformer. |
274+
| `getTransformers` | *none* | Returns default and custom transformers. |
275+
| `getVersion` | *none* | Returns the current version. |

example/minimal-requirejs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@
99
"requirejs-json": "^0.0.3",
1010
"requirejs-text": "^2.0.15"
1111
}
12-
}
12+
}

example/minimal-requirejs/www/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Microdata Template: Example: RequireJS Implementation</title>
6+
<link rel="icon" href="data:,">
67
<style>
78
body {
89
font-family: sans-serif;

example/minimal-webpack/dist/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="UTF-8">
66
<title>Microdata Template: Example: Webpack Implementation</title>
7+
<link rel="icon" href="data:,">
78
<style>
89
body {
910
font-family: sans-serif;

example/minimal-webpack/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@
1717
"webpack-cli": "^3.3.7",
1818
"webpack-dev-server": "^3.8.0"
1919
}
20-
}
20+
}

example/simple-javascript/array.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Microdata Template: Example: Array Source</title>
6+
<link rel="icon" href="data:,">
67
<script src="../../lib/microdata-template.js" crossorigin="anonymous"></script>
78
<style>
89
dl.menu {

example/simple-javascript/collection.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Microdata Template: Example: Collection Source</title>
6+
<link rel="icon" href="data:,">
67
<script src="../../lib/microdata-template.js" crossorigin="anonymous"></script>
78
<style>
89
body {

example/simple-javascript/form.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Microdata Template: Example: Form Construction</title>
6+
<link rel="icon" href="data:,">
67
<script src="../../lib/microdata-template.js" crossorigin="anonymous"></script>
78
<style>
89
body {

example/simple-javascript/multiple.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Microdata Template: Example: Multiple Renders</title>
6+
<link rel="icon" href="data:,">
67
<script src="../../lib/microdata-template.js" crossorigin="anonymous"></script>
78
<style>
89
body {

example/simple-javascript/object.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Microdata Template: Example: Object Source</title>
6+
<link rel="icon" href="data:,">
67
<script src="../../lib/microdata-template.js" crossorigin="anonymous"></script>
78
<style>
89
body {

0 commit comments

Comments
 (0)