Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elldritch/clientele.js
Consolidate.js for client-side rendering.
https://github.com/elldritch/clientele.js
Last synced: 5 days ago
JSON representation
Consolidate.js for client-side rendering.
- Host: GitHub
- URL: https://github.com/elldritch/clientele.js
- Owner: elldritch
- License: apache-2.0
- Created: 2014-01-04T00:25:42.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2014-01-17T08:00:38.000Z (almost 11 years ago)
- Last Synced: 2024-04-13T16:19:13.856Z (7 months ago)
- Language: JavaScript
- Size: 191 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# clientele.js
[](https://travis-ci.org/The2ndOne3/clientele.js)
Template engine consolidation library, for the client. Works as Express/Connect middleware.
Clientele is greatly inspired by [Consolidate.js](//github.com/visionmedia/consolidate.js), [jade-browser](//github.com/storify/jade-browser), [Blade](//github.com/bminer/node-blade), and [Dust](//github.com/akdubya/dustjs).
## Installation
Clientele is still under development.
## Usage
Clientele is built as an Express/Connect middleware. To serve pre-compiled client-side templates of any engine, simply embed the endpoint (default: `/js/templates.js`) into the page and add `clientele.engine()` to the stack of any Express-like app to access pre-compiled client-side views (default: `public/templates/**`).
All engines use the following signature: `clientele.engine(templates, endpoint, options);`
### Params
* `templates` A pattern to glob for templates (default: `public/templates/**`)
* `endpoint` The filename of the resulting compiled templates (default: `/js/templates.js`)
* `options` Options object, see below (optional)
#### Options
* `namespace` Namespace for the browser (default: engine name)
* `minify` Minifies the output (default: false)
* `noCache` Do not cache compiled templates (default: false)
```js
var clt = require('clientele');
//...
app.use(clt.engine('public/templates/**', '/js/templates.js', {
namespace: 'engine-name',
minify: false,
noCache: false
}));
//...
```
### Browser Usage
On the client, loading the script at the endpoint will load the engine runtime at `window.namespace`, which defaults to `window.engine_name`. For example, a Jade engine will default to a Jade runtime at `window.jade`. From there, you can call either `window.jade.render(template, locals, callback)` or `window.jade.renderSync(template, locals)`.
Templates are specified by filename relative to the template directory. Including the extension is not necessary. They are loaded asynchronously and separately from the engine; to preload a template, call `engine_name.preload(template)`. By default, Clientele will cache loaded templates on the client. To force a reload, call `engine.reload(template)`.
```js
// Asynchronous rendering.
jade.render('example', {title: 'yes'}, function(err, result){
if(err){
return console.error('Something went wrong!');
}
doSomething(result);
});
// Synchronous rendering.
result = jade.renderSync('example', {title: 'yes'});
```
## Supported Engines
* Jade
## Example
app.js:
```js
var clt = require('clientele')
, express = require('express');
var app = express();
// ...
app.use(clt.jade());
// ...
```
public/templates/example.jade:
```jade
doctype html
html
head
title Example client-side template.
body
p Hello!
```
public/views/index.jade:
```jade
doctype html
html
head
title Example website.
script(src='/js/templates.js')
script.
jade.render('example', callback); // Render the template asynchronously.
jade.renderSync('example', callback); // Render the template synchronously.
body
p Hello from the server!
```