hu19891110 / sodajs

Light weight but powerful template engine for JavaScript

sodajs

Light weight but powerful template engine for JavaScript.

npm install sodajs

Why using sodajs?

• super tiny size (2kb gzip)
• make your template file tidy, clearly to read.
• good compatibility (IE6+)
• prevents XSS holes in your template file
• high-performance DOM parser

Usage

simple

var tpl = '<div>Hello, {{name}}</div>'
document.body.innerHTML = soda(tpl,{ name : 'soda' })

➜ simple example

if

var tpl = '<div soda-if="show">Hello, {{name}}</div>' +
            '<div soda-if="!show">I\'m hidden!</div>'
document.body.innerHTML = soda(tpl,{ name : 'soda',show: true })

➜ if example

repeat

soda-repeat="item in array"

soda-repeat="item in object"

soda-repeat="item in array by index"

soda-repeat="item in object by key"

soda-repeat="(index, value) in array"

soda-repeat="(key, value) in object"

default index or key is $index

var tpl = '\
<ul>\
    <li soda-repeat="item in list" soda-if="item.show">\
        {{item.name}}\
        {{$index}}\
    </li>\
</ul>'

var data = {
    list: [
        {name: "Hello" ,show: true},
        {name: "sodajs" ,show: true},
        {name: "AlloyTeam"}
    ]
};

document.body.innerHTML =  soda(tpl, data);

➜ repeat example

expression

var tpl = '<div>Hello, {{count+1}}</div>'
document.body.innerHTML = soda(tpl,{ count : 1 })

➜ expression example

filter

soda.filter(String filterName, Function func(input, args...)) {{input|filte1:args1:args2...|filter2:args...}}

example:

soda.filter('shortTitle', function(input, length){
    return (input || '').substr(0, length);
});

var tpl = '\
<ul soda-repeat="item in list">\
    <li class="title">\
        {{item.title|shortTitle:10}}\
    </li>\
</ul>'


document.body.innerHTML = soda(tpl,{ list : [
    {title:'short'},
    {title:'i am too long!'}
] })

➜ filter example

html

var tpl = '<div soda-html="html"></div>'
document.body.innerHTML = soda(tpl,{ html : '<span style="color:red;">test soda-html</span>' })

➜ html example

Others

soda-class

soda-class="currItem === 'list1' ? 'active' : ''"

soda-src

soda-src="hello{{index}}.png"

soda-style

soda-style="style"

data example:

var data = { style : { width : '100px', height : '100px' } };

soda-*

soda-rx="{{rx}}%"

soda.prefix

soda.prefix('o')

var tpl = '\
<ul>\
    <li o-repeat="item in list" o-if="item.show">\
        {{item.name}}\
    </li>\
</ul>'


var data = {
    list: [
        {name: "Hello" ,show: true},
        {name: "sodajs" ,show: true},
        {name: "AlloyTeam"}
    ]
};

document.body.innerHTML =  soda(tpl, data);

you can customize your prefix by soda.prefix method.

Who using sodajs?

sodajs is currently using by QQ Tribes(兴趣部落), QQ Group(群) and other projects

License

MIT

Copyright (c) 2015-present, AlloyTeam