Skip to content

Commit f15966b

Browse files
committed
Reformat documentation to fit into 80 characters column.
1 parent 4ed9ee1 commit f15966b

File tree

1 file changed

+86
-34
lines changed

1 file changed

+86
-34
lines changed

README.md

Lines changed: 86 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
[JavaScript Templates Demo](https://blueimp.github.io/JavaScript-Templates/)
55

66
## Description
7-
< 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers.
7+
< 1KB lightweight, fast & powerful JavaScript templating engine with zero
8+
dependencies. Compatible with server-side environments like node.js, module
9+
loaders like RequireJS and all web browsers.
810

911
## Usage
1012

@@ -15,7 +17,8 @@ Include the (minified) JavaScript Templates script in your HTML markup:
1517
<script src="js/tmpl.min.js"></script>
1618
```
1719

18-
Add a script section with type **"text/x-tmpl"**, a unique **id** property and your template definition as content:
20+
Add a script section with type **"text/x-tmpl"**, a unique **id** property and
21+
your template definition as content:
1922

2023
```html
2124
<script type="text/x-tmpl" id="tmpl-demo">
@@ -31,9 +34,11 @@ Add a script section with type **"text/x-tmpl"**, a unique **id** property and y
3134
</script>
3235
```
3336

34-
**"o"** (the lowercase letter) is a reference to the data parameter of the template function (see the API section on how to modify this identifier).
37+
**"o"** (the lowercase letter) is a reference to the data parameter of the
38+
template function (see the API section on how to modify this identifier).
3539

36-
In your application code, create a JavaScript object to use as data for the template:
40+
In your application code, create a JavaScript object to use as data for the
41+
template:
3742

3843
```js
3944
var data = {
@@ -50,19 +55,23 @@ var data = {
5055
};
5156
```
5257

53-
In a real application, this data could be the result of retrieving a [JSON](http://json.org/) resource.
58+
In a real application, this data could be the result of retrieving a
59+
[JSON](http://json.org/) resource.
5460

55-
Render the result by calling the **tmpl()** method with the id of the template and the data object as arguments:
61+
Render the result by calling the **tmpl()** method with the id of the template
62+
and the data object as arguments:
5663

5764
```js
5865
document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);
5966
```
6067

6168
### Server-side
6269

63-
The following is an example how to use the JavaScript Templates engine on the server-side with [node.js](http://nodejs.org/).
70+
The following is an example how to use the JavaScript Templates engine on the
71+
server-side with [node.js](http://nodejs.org/).
6472

65-
Create a new directory and add the **tmpl.js** file. Or alternatively, install the **blueimp-tmpl** package with [npm](https://www.npmjs.org/):
73+
Create a new directory and add the **tmpl.js** file. Or alternatively, install
74+
the **blueimp-tmpl** package with [npm](https://www.npmjs.org/):
6675

6776
```sh
6877
npm install blueimp-tmpl
@@ -126,19 +135,22 @@ The JavaScript Templates script has zero dependencies.
126135
## API
127136

128137
### tmpl() function
129-
The **tmpl()** function is added to the global **window** object and can be called as global function:
138+
The **tmpl()** function is added to the global **window** object and can be
139+
called as global function:
130140

131141
```js
132142
var result = tmpl("tmpl-demo", data);
133143
```
134144

135-
The **tmpl()** function can be called with the id of a template, or with a template string:
145+
The **tmpl()** function can be called with the id of a template, or with a
146+
template string:
136147

137148
```js
138149
var result = tmpl("<h3>{%=o.title%}</h3>", data);
139150
```
140151

141-
If called without second argument, **tmpl()** returns a reusable template function:
152+
If called without second argument, **tmpl()** returns a reusable template
153+
function:
142154

143155
```js
144156
var func = tmpl("<h3>{%=o.title%}</h3>");
@@ -158,14 +170,19 @@ result = tmpl("tmpl-demo", data); // Loads and parses the template again
158170
```
159171

160172
### Output encoding
161-
The method **tmpl.encode** is used to escape HTML special characters in the template output:
173+
The method **tmpl.encode** is used to escape HTML special characters in the
174+
template output:
162175

163176
```js
164177
var output = tmpl.encode("<>&\"'\x00"); // Renders "&lt;&gt;&amp;&quot;&#39;"
165178
```
166179

167-
**tmpl.encode** makes use of the regular expression **tmpl.encReg** and the encoding map **tmpl.encMap** to match and replace special characters, which can be modified to change the behavior of the output encoding.
168-
Strings matched by the regular expression, but not found in the encoding map are removed from the output. This allows for example to automatically trim input values (removing whitespace from the start and end of the string):
180+
**tmpl.encode** makes use of the regular expression **tmpl.encReg** and the
181+
encoding map **tmpl.encMap** to match and replace special characters, which can
182+
be modified to change the behavior of the output encoding.
183+
Strings matched by the regular expression, but not found in the encoding map are
184+
removed from the output. This allows for example to automatically trim input
185+
values (removing whitespace from the start and end of the string):
169186

170187
```js
171188
tmpl.encReg = /(^\s+)|(\s+$)|[<>&"'\x00]/g;
@@ -175,21 +192,28 @@ var output = tmpl.encode(" Banana! "); // Renders "Banana" (without whites
175192
### Local helper variables
176193
The local variables available inside the templates are the following:
177194

178-
* **o**: The data object given as parameter to the template function (see the next section on how to modify the parameter name).
195+
* **o**: The data object given as parameter to the template function
196+
(see the next section on how to modify the parameter name).
179197
* **tmpl**: A reference to the **tmpl** function object.
180198
* **_s**: The string for the rendered result content.
181199
* **_e**: A reference to the **tmpl.encode** method.
182200
* **print**: Helper function to add content to the rendered result string.
183-
* **include**: Helper function to include the return value of a different template in the result.
201+
* **include**: Helper function to include the return value of a different
202+
template in the result.
184203

185-
To introduce additional local helper variables, the string **tmpl.helper** can be extended. The following adds a convenience function for *console.log* and a streaming function, that streams the template rendering result back to the callback argument (note the comma at the beginning of each variable declaration):
204+
To introduce additional local helper variables, the string **tmpl.helper** can
205+
be extended. The following adds a convenience function for *console.log* and a
206+
streaming function, that streams the template rendering result back to the
207+
callback argument
208+
(note the comma at the beginning of each variable declaration):
186209

187210
```js
188211
tmpl.helper += ",log=function(){console.log.apply(console, arguments)}" +
189212
",st='',stream=function(cb){var l=st.length;st=_s;cb( _s.slice(l));}";
190213
```
191214

192-
Those new helper functions could be used to stream the template contents to the console output:
215+
Those new helper functions could be used to stream the template contents to the
216+
console output:
193217

194218
```html
195219
<script type="text/x-tmpl" id="tmpl-demo">
@@ -211,7 +235,9 @@ Those new helper functions could be used to stream the template contents to the
211235
```
212236

213237
### Template function argument
214-
The generated template functions accept one argument, which is the data object given to the **tmpl(id, data)** function. This argument is available inside the template definitions as parameter **o** (the lowercase letter).
238+
The generated template functions accept one argument, which is the data object
239+
given to the **tmpl(id, data)** function. This argument is available inside the
240+
template definitions as parameter **o** (the lowercase letter).
215241

216242
The argument name can be modified by overriding **tmpl.arg**:
217243

@@ -223,15 +249,23 @@ var result = tmpl("<h3>{%=p.title%}</h3>", {title: "JavaScript Templates"});
223249
```
224250

225251
### Template parsing
226-
The template contents are matched and replaced using the regular expression **tmpl.regexp** and the replacement function **tmpl.func**. The replacement function operates based on the [parenthesized submatch strings](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter).
252+
The template contents are matched and replaced using the regular expression
253+
**tmpl.regexp** and the replacement function **tmpl.func**.
254+
The replacement function operates based on the
255+
[parenthesized submatch strings](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter).
227256

228-
To use different tags for the template syntax, override **tmpl.regexp** with a modified regular expression, by exchanging all occurrences of "{%" and "%}", e.g. with "[%" and "%]":
257+
To use different tags for the template syntax, override **tmpl.regexp** with a
258+
modified regular expression, by exchanging all occurrences of "{%" and "%}",
259+
e.g. with "[%" and "%]":
229260

230261
```js
231262
tmpl.regexp = /([\s'\\])(?!(?:[^[]|\[(?!%))*%\])|(?:\[%(=|#)([\s\S]+?)%\])|(\[%)|(%\])/g;
232263
```
233264

234-
By default, the plugin preserves whitespace (newlines, carriage returns, tabs and spaces). To strip unnecessary whitespace, you can override the **tmpl.func** function, e.g. with the following code:
265+
By default, the plugin preserves whitespace
266+
(newlines, carriage returns, tabs and spaces).
267+
To strip unnecessary whitespace, you can override the **tmpl.func** function,
268+
e.g. with the following code:
235269

236270
```js
237271
var originalFunc = tmpl.func;
@@ -316,35 +350,53 @@ Use **include(str, obj)** to include content from a different template:
316350
```
317351

318352
## Compiled templates
319-
The JavaScript Templates project comes with a compilation script, that allows you to compile your templates into JavaScript code and combine them with a minimal Templates runtime into one minified JavaScript file.
353+
The JavaScript Templates project comes with a compilation script, that allows
354+
you to compile your templates into JavaScript code and combine them with a
355+
minimal Templates runtime into one minified JavaScript file.
320356

321-
The compilation script is built for [node.js](http://nodejs.org/) and also requires [UglifyJS](https://github.com/mishoo/UglifyJS).
322-
To use it, first install both the JavaScript Templates project and UglifyJS via [npm](https://www.npmjs.org/):
357+
The compilation script is built for [node.js](http://nodejs.org/) and also
358+
requires [UglifyJS](https://github.com/mishoo/UglifyJS).
359+
To use it, first install both the JavaScript Templates project and UglifyJS via
360+
[npm](https://www.npmjs.org/):
323361

324362
```sh
325-
npm install uglify-js
326-
npm install blueimp-tmpl
363+
npm install uglify-js blueimp-tmpl
327364
```
328365

329-
This will put the executables **uglifyjs** and **tmpl.js** into the folder **node_modules/.bin**. It will also make them available on your PATH if you install the packages globally (by adding the **-g** flag to the install command).
366+
This will put the executables **uglifyjs** and **tmpl.js** into the folder
367+
**node_modules/.bin**. It will also make them available on your PATH if you
368+
install the packages globally
369+
(by adding the **-g** flag to the install command).
330370

331-
The **tmpl.js** executable accepts the paths to one or multiple template files as command line arguments and prints the generated JavaScript code to the console output. The following command line shows you how to store the generated code in a new JavaScript file that can be included in your project:
371+
The **tmpl.js** executable accepts the paths to one or multiple template files
372+
as command line arguments and prints the generated JavaScript code to the
373+
console output. The following command line shows you how to store the generated
374+
code in a new JavaScript file that can be included in your project:
332375

333376
```sh
334377
tmpl.js templates/upload.html templates/download.html > tmpl.min.js
335378
```
336379

337-
The files given as command line arguments to **tmpl.js** can either be pure template files or HTML documents with embedded template script sections. For the pure template files, the file names (without extension) serve as template ids.
338-
The generated file can be included in your project as a replacement for the original **tmpl.js** runtime. It provides you with the same API and provides a **tmpl(id, data)** function that accepts the id of one of your templates as first and a data object as optional second parameter.
380+
The files given as command line arguments to **tmpl.js** can either be pure
381+
template files or HTML documents with embedded template script sections.
382+
For the pure template files, the file names (without extension) serve as
383+
template ids.
384+
The generated file can be included in your project as a replacement for the
385+
original **tmpl.js** runtime. It provides you with the same API and provides a
386+
**tmpl(id, data)** function that accepts the id of one of your templates as
387+
first and a data object as optional second parameter.
339388

340389
## Tests
341-
The JavaScript Templates project comes with [Unit Tests](https://en.wikipedia.org/wiki/Unit_testing).
390+
The JavaScript Templates project comes with
391+
[Unit Tests](https://en.wikipedia.org/wiki/Unit_testing).
342392
There are two different ways to run the tests:
343393

344394
* Open test/index.html in your browser or
345395
* run `npm test` in the Terminal in the root path of the repository package.
346396

347-
The first one tests the browser integration, the second one the [node.js](http://nodejs.org/) integration.
397+
The first one tests the browser integration,
398+
the second one the[node.js](http://nodejs.org/) integration.
348399

349400
## License
350-
The JavaScript Templates script is released under the [MIT license](http://www.opensource.org/licenses/MIT).
401+
The JavaScript Templates script is released under the
402+
[MIT license](http://www.opensource.org/licenses/MIT).

0 commit comments

Comments
 (0)