node package manager

sizlate

Templating engine using sizzle selectors.

Sizlate

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.

var html = '<div><a></a></div>';
var selectors = {
    'div a': 'UPDATED'
};
var out = sizlate.render(html, selectors);
<div>
    <a>UPDATED</a>
</div>
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>
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>
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>
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

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