SodaRender Examples<a href="https://github.com/dorsywang/SodaRender#sodarender-1"></a>sodaRender<a href="https://github.com/dorsywang/SodaRender#sodafilter"></a>sodaFilte 介绍
SodaRender 是轻量级的模板引擎。当前只支持 IE9，Chrome 和移动端的所有浏览器。
SodaRender语法源自于AngularJS，前端框架Abstract.js已经内置SodaRender引擎，SodaRender引擎应用于腾讯手机QQ中，已被证实是一款优秀的模板引擎
用法示例：
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
[](https://github.com/dorsywang/SodaRender#template-language-angularjs-
template-like)Template Language (AngularJs Template Like)
added)More directives have been added
out put expressions
{{item.name + 1}}
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=”item.show”
soda-class=”currItem === ‘list1’ ? ‘active’ : ‘’“
soda-src=”hello{{index}}.png”
soda-bind-html=”
“
soda-style=”style”
soda-rx=”{{rx}}%”
{{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>