SodaRender輕量級(jí)模板引擎

SodaRender 是輕量級(jí)的模板引擎。當(dāng)前只支持 IE9，Chrome 和移動(dòng)端的所有瀏覽器。

SodaRender語(yǔ)法源自于AngularJS，前端框架Abstract.js已經(jīng)內(nèi)置SodaRender引擎，SodaRender引擎應(yīng)用于騰訊手機(jī)QQ中，已被證實(shí)是一款優(yōu)秀的模板引擎

用法示例：

Examples

html>head>title>SodaRender Examapletitle>head>div>ul id="targetUl">script type="text/soda" id="dataList">li soda-repeat="item in list" soda-if="item.show">{{item.name}}li>script>ul>div>html>

var templateStr = document.getElementById("dataList").innerHTML;

var target = document.getElementById("targetUl"); var data = {  list: [  {name: "A"},

        {name: "B"}
    ]
};  var result = sodaRender(templateStr, data);

target.appendChild(result);

APIs Of SodaRender

sodaRender

USING :   SodaRender(String templateStr, Object data)
DESCR :   Using templateStr with data to render template
RETURN: DOM Fragment
the DOM Frament Object has a method innerHTML which will return the rendered HTML code.
Meanwhile, you can use it like a common DOM Node, such as appending it to your target node.

sodaFilter

USING :   SodaFilter(String filterName, Function func(input, args...))
DESCR :   Defining Filters, so you can use filters in template

Template Language (AngularJs Template Like)

More directives have been added

{{}}

out put expressions

{{item.name + 1}}

soda-repeat

soda-repeat="item in array"

soda-repeat="item in array track by index"

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

USING :   SodaRender(String templateStr, Object data)
DESCR :   Using templateStr with data to render template

soda-if

soda-if="item.show"

soda-class

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

soda-src

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

soda-bind-html

soda-bind-html="

click

"

soda-style

soda-style="style"

soda-*

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

filters

{{input|filte1:args1:args2...|filter2:args...}} how to define filters? Just using sodaFilter Method as methioned above. Here is an example.

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

Template below

div soda-repeat="item in list">div class="title">{{item.title|shortTitle:10}}div>div>