Sizlate

Sizlate is an HTML templating engine.

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

Templates are populated using css selectors

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);

From version 2.0 sizlate does not require sizzle on the client

Here is an example of doing this in the client eg:

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