轻量级模板引擎SodaRender.zip

SodaRender 是轻量级的模板引擎。当前只支持 IE9，Chrome 和移动端的所有浏览器。SodaRender语法源自于AngularJS，前端框架Abstract.js已经内置SodaRender引擎，SodaRender引擎应用于腾讯手机QQ中，已被证实是一款优秀的模板引擎用法示例：Exampleshtml>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")[removed];var target = document.getElementById("targetUl"); var data = {  list: [  {name: "A"},        {name: "B"}     ] };  var result = sodaRender(templateStr, data);target.appendChild(result);APIs Of SodaRendersodaRenderUSING :   SodaRender(String templateStr, Object data)DESCR :   Using templateStr with data to render templateRETURN: DOM Fragmentthe 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.sodaFilterUSING :   SodaFilter(String filterName, Function func(input, args...))DESCR :   Defining Filters, so you can use filters in templateTemplate Language (AngularJs Template Like)More directives have been added{{}}out put expressions{{item.name 1}}soda-repeatsoda-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 templatesoda-ifsoda-if="item.show"soda-classsoda-class="currItem === 'list1' ? 'active' : ''"soda-srcsoda-src="hello{{index}}.png"soda-bind-htmlsoda-bind-html="click"soda-stylesoda-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 belowdiv soda-repeat="item in list">div class="title">{{item.title|shortTitle:10}}div>div> 标签：SodaRender