轻量级模板引擎SodaRender.zip

时间:2022-08-06 14:07:18
【文件属性】:

文件名称:轻量级模板引擎SodaRender.zip

文件大小:20KB

文件格式:ZIP

更新时间:2022-08-06 14:07:18

开源项目

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


【文件预览】:
SodaRender-master
----combined()
--------sodarender.js(5KB)
----Modfile(442B)
----test()
--------testNew.html(4KB)
--------user_script.html(808B)
--------use_mvvc.html(893B)
----src()
--------copyright.js(231B)
--------sodarender.js(17KB)
--------sodarender.old.js(5KB)
----README.md(3KB)
----README.old - 副本.md(4KB)
----release()
--------sodarender.js(5KB)
----example.old()
--------user_script.html(812B)
--------use_mvvc.html(600B)
--------sodarender()

网友评论