use sizzle selectors for templating
JavaScript CSS HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
client
examples
lib
server
spec
testRunner
.gitignore
.jscsrc
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
sizlate-client.js
sizlate.js

README.md

Sizlate

Build Status Dependency Status

Sizlate is an HTML templating engine.

Sizlate requires no special syntax, your templates only contain valid HTML.

Templates are populated using sizzle selectors (as used in jQuery).

You can pass render a string of html, or a dom Node.

If you specify a DOM node attached to the main document the rendering will happen on the page.

Examples

Simple text

var html = '<div><a></a></div>';
var selectors = {
    'div a': 'UPDATED'
};
var out = sizlate.render(html, selectors);
<div>
    <a>UPDATED</a>
</div>

ClassName

var html = '<div><a class="class1"></a></div>';
var selectors = {
    'div a': {
        className: 'class2'
    }
};
var out = sizlate.render(html, selectors);
<div>
    <a class="class1 class2"></a>
</div>

Arrays

var html = '<ul><li></li></ul>';
var selectors = {
    'li': [
        'change links to this',
        'change links to this2',
        {
            'href': 'df',
            innerHTML: 'aaa'
        }
    ]
};
var out = sizlate.render(html, selectors);
<ul>
    <li>change links to this</li>
    <li>change links to this2</li>
    <li href="df">aaa</li>
</ul>

Object

var html = '<div><a></a></div>';
var selectors = {
    'a': {
        href: 'http://yahoo.com',
        title: 'yahoo',
        innerHTML: 'yahoo'
    }
};
var out = sizlate.render(html, selectors);
<div>
    <a href="http://yahoo.com" title="yahoo">yahoo</a>
</div>

Regular Expression

var html = '<div><a>existing text</a></div>';
var selectors = {
    'a': {
        'innerText': {
            regex: /existing ([a-z]+)/ig,
            value: 'new $1'
        }
    }
};
var out = sizlate.render(html, selectors);
<div>
    <a>new text</a>
</div>

See /examples

Clientside

From v1.0.0 Sizlate works in the browser. You can pass it a string of html or a dom node. For example:

var $domNode = $('#area');
var selectors = {'div': 'new content'};
sizlate.render($domNode, selectors);

You will need to have jQuery (window.$) on the page, or something like Zepto that provides a jQuery like api.

That said, you don't have to use jQuery to select the dom node, eg:

var domNode = document.getElementById('area');
var selectors = {'div': 'new content'};
sizlate.render(domNode, selectors);

Express

From sizlate v1 Express is not supported.

For the moment you will need to use an older version of sizlate.

The functionality is being moved into https://github.com/simonmcmanus/sizlate-express