Facile is a convention-based template engine that can be executed either in the browser (using jQuery or zepto) or on the server (using cheerio). While other template systems like Mustache give the developer syntax for explicit conditionals, enumerations and data bindings, Facile uses simple conventions to achieve the same goals with less code.
If you want to use Facile with Node.js, install it using npm
:
npm install facile
To use Facile in the browser, either copy the facile.coffee
file
or the compiled test/public/javascripts/facile.js
file into your
project.
The facile package is a single function that accepts a template
string
and a data
object:
var facile = require("facile"), // only needed in Node.js
template = "...",
data = {...},
output = facile(template, data);
Facile will look for DOM ids and classes that match the keys in your data object and set the DOM elements' text to the data values:
var template = '<div id="dog"></div><div class="cat"></div>',
data = {dog: "woof", cat: "meow"};
facile(template, data);
// returns '<div id="dog">woof</div><div class="cat">meow</div>'
When a value in the data object is an array, Facile will find the container DOM element that matches the data key and render its contents for each item in the array.
var template = '<ul id="users"><li class="name"></li></ul>',
data = {users: [
{name: "Moe"},
{name: "Larry"},
{name: "Curly"}
]};
facile(template, data);
// returns:
// <ul id="users">
// <li class="name">Moe</li>
// <li class="name">Larry</li>
// <li class="name">Curly</li>
// </ul>
If you are binding an array of data to a <table>
element, Facile will
expect there to be a single <tr>
inside the table's <tbody>
and
will repeat that <tr>
for each item in the array.
var template = '<table id="users">' +
' <thead>' +
' <tr><th>Name</th></tr>' +
' </thead>' +
' <tbody>' +
' <tr><td class="name"></td></tr>' +
' </tbody>' +
'</table>',
data = {users: [
{name: "Moe"},
{name: "Larry"},
{name: "Curly"}
]};
facile(template, data);
// returns:
// <table id="users">
// <thead>
// <tr><th>Name</th></tr>
// </thead>
// <tbody>
// <tr><td class="name">Moe</td></tr>
// <tr><td class="name">Larry</td></tr>
// <tr><td class="name">Curly</td></tr>
// </tbody>
// </table>
If the data object has a null
value, the corresponding DOM element
will be removed.
var template = '<p>Hello!</p><p class="impolite">Take a hike, guy.</p>',
data = {impolite: null};
facile(template, data);
// returns "<p>Hello!</p>"
### Setting DOM Attributes
There are two ways to set DOM attributes on elements using Facile.
First, if a value in the data object is an object, Facile will treat
the keys as attribute names for the matching DOM element. *NOTE:*
the `content` key is special in that it updates the content of the
element rather than setting a `content` attribute.
```javascript
var template = '<div id="dog" />',
data = {dog: {content: 'woof', 'data-age': 3} };
facile(template, data);
// returns '<div id="dog" data-age="3">woof</div>'
The second way is to name a key in the data object using the convention
id-or-class@attribute
.
var template = '<div id="dog" />',
data = {dog: 'woof', 'dog@data-age': 3};
facile(template, data);
// returns '<div id="dog" data-age="3">woof</div>'
- Install
node
andnpm
. - Run
npm install
to the dependencies - Run
npm test
to run the specs in Node.js - Run
./coffee
to watch/compile the CoffeeScripts - Run
node test
to run Jasmine test server - Visit http://localhost:5000 to see the tests run in the browser.