xsalt

xsalt

A different kind of template engine

Why another templating engine? I'm sure that question was asked before mustache or handlebars were started. Why not, I say?

• I don't like {{value}} style templating
• I hate the phrases "syntactic sugar" and "sugaring", so salt...
• xsalt is a play on "XSLT", old school xml templating
• once your templates are xsalt-ed, they are exalted

xsalt uses native document node manipulation to work with templates. There are three (very simple) regular expressions in the entire codebase. The syntax is meant to blend in with regular HTML, and the API is meant to feel like you are working with the native DOM. Because of that, nodes can be wrapped in jQuery (or other) and manipulated in a very natural way that blends with your code. See the examples for more.

Unstable

xsalt is brand new. The API is beginning to stabilize but might change radically from one version to the next. File a bug if you find one please and take a look at the open issues.

I like to jump into examples before API docs, so...

Examples

One quick disclaimer: tags with restrictions on their child elements (select, table, etc...) are not handling xs:* prefixed children, they are stripping them out. Experiment a bit to make your template work (start with xs:option and append it to a select, rather than include the select in your template, for example) Also, the examples previously have examples where a lot of closing tags were omitted. These examples would work, but it is probably best to include closing tags to ensure you get the structure you are expecting. As with HTML in general, it is best if you close tags (that require closing) to ensure the output is what you expect.

// Basic usage: prefix elements to process with "xs:"
// Supported attributes are val, html, and each
// val populates the value attribute
// html sets innerHTML
// each iterates over a collection of properties and executes val or html
// val and html essentially correspond to properties in the data object you pass in

var eat = {
    food: {
        vegetables: [
            { name: "Corn" },
            { name: "Peas" },
            { name: "Carrots" }
        ],
    }
};

// output: <form method="POST" action="process.php"><input type="text" name="folder" value="Corn"><input type="text" name="folder" value="Peas"><input type="text" name="folder" value="Carrots"></form>
console.log(xsalt('<form method="POST" action="process.php"><xs:input type="text" each="food.vegetables" val="name" name="folder">').compile(eat));


var data = {
    users: [
        { username: 'ross', type: 1 },
        { username: 'steve', type: 1 },
        { username: 'bob', type: 2 },
        { username: 'dan', type: 1 },
        { username: 'trudy', type: 2 },
        { username: 'lucy', type: 1 }
    ]
};

var list = xsalt('<ul class="items users"><xs:li each="users" html="username" data-action="some action"></xs:li></ul>');

// passing in a callback, you can work with the DOM node. Wrap $(node) and
// you can do anything you want to it. or use native methods

// output: <ul class="items users"><li data-action="some action">ross</li><li data-action="some action">steve</li><li data-action="some action" class="edit">bob</li><li data-action="some action">dan</li><li data-action="some action" class="edit">trudy</li><li data-action="some action">lucy</li></ul>
console.log(list.compile(data, function(node, data) {
    if( data.type == 2 ) {
        node.className += "edit";
        // jQuery version: $(node).addClass("edit");
    }
}));


var consoles = [
    { text: "PS4", value: 1 },
    { text: "XBOX One", value: 2 },
    { text: "Wii U", value: 3 }
];

// each="." will use the root value of the data passed into compile
var options = xsalt('<select class="selectbox consoles"><xs:option each="." html="text" val="value"></xs:option></select>');

// output: <option value="1">PS4</option><option value="2">XBOX One</option><option value="3">Wii U</option>
console.log(options.compile(consoles));


// "wrapping" attributes

var data = {
    users: [
        {username: "bob", type: 1, id: 42},
        {username: "lucy", type: 2, id: 98},
        {username: "sandy", type: 1, id: 39},
        {username: "jerry", type: 1, id: 74}
    ]
};

// output: <input type="text" value="bob" id="user_42"><input type="text" value="lucy" id="user_98"><input type="text" value="sandy" id="user_39"><input type="text" value="jerry" id="user_74">
var test = xsalt('<xs:input type="text" val="username" each="users">').compile(data, function( node, data ) {
    node.setAttribute("id", "user_" + data.id);
    // jQuery version: $(node).attr("id", "user_" + data.id);
});

API

Coming soon. For now see the examples.