| 标题 | javascript轻量级模板引擎juicer使用指南 |
| 内容 | Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。 使用方法 编译模板并根据数据立即渲染出结果 view sourceprint?1 juicer(tpl, data); 仅编译模板暂不渲染，返回一个可重用的编译后的函数 view sourceprint?1 var compiled_tpl = juicer(tpl); 根据给定的数据对之前编译好的模板进行渲染 view sourceprint?1 var complied_tpl = juicer(tpl); 2 var html = complied_tpl.render(data); 注册/注销自定义函数（对象） view sourceprint?1 juicer.register(‘function_name', function); 2 juicer.unregister(‘function_name'); 默认参数配置 view sourceprint?1 { 2 cache: true [false]; 3 script: true [false]; 4 error handling: true [false]; 5 detection: true [false]; 6 } 修改默认配置，逐条修改 view sourceprint?1 juicer.set('cache', false); 修改默认配置，批量修改 view sourceprint?1 juicer.set({ 2 'script': false, 3 'cache': false 4 }) Juicer 默认会对编译后的模板进行缓存，从而避免同一模板多次数据渲染时候重复编译所耗的时间， 如无特殊需要，强烈不建议关闭默认参数中的 cache，这么做将会令 Juicer 缓存失效从而降低性能. 语法 * ${变量} - 使用${}输出变量，其中_ 为对数据源的引用（${_})。支持使用自定义函数。 view sourceprint?1 ${name} 2 ${name|function} 3 ${name|function, arg1, arg2} view sourceprint?01 var = links: [{href: 'http://juicer.name', alt: 'Juicer'}, 02 {href: 'http://benben.cc', alt: 'Benben'}, 03 {href: 'http://ued.taobao.com', alt: 'Taobao UED'} 04 ]}; 05 var tpl = [ '{@each links as item}', 06 '${item|links_build} <br />', 07 '{@/each}'].join(''); 08 var links = function(data) { 09 return '<a href="' + data.href + '" />'; 10 }; 11 juicer.register('links_build', links); //注册自定义函数 12 juicer(tpl, json); * 转义/避免转义 - ${变量} 在输出之前会对其内容进行转义，如果你不想输出结果被转义，可以使用 $${变量} 来避免这种情况。 view sourceprint?1 var json = { 2 value: '<strong>juicer</strong>' 3 }; 4 var escape_tpl='${value}'; 5 var unescape_tpl='$${value}'; 6 juicer(escape_tpl, json); //输出 '<strong>juicer</strong>' 7 juicer(unescape_tpl, json); //输出 '<strong>juicer</strong>' *循环遍历 {@each} ... {@/each} - 遍历数组，${index}当前索引 view sourceprint?1 {@each list as item, index} 2 ${item.prop} 3 ${index} //当前索引 4 {@/each} *判断 {@if} ... {@else if} ... {@else} ... {@/if} *注释 {# 注释内容} {# 这里是注释内容} *辅助循环 {@each i in range(m, n)} view sourceprint?1 {@each i in range(5, 10)} 2 ${i}; //输出 5;6;7;8;9; 3 {@/each} *子模板嵌套 {@include tpl, data} - 子模板嵌套除了可以引入在数据中指定的子模板外，也可以通过指定字符串`#id`使用写在`script`标签中的模板代码. - HTML代码： view sourceprint?1 <script type="text/juicer" id="subTpl"> 2 I'm sub content, ${name} 3 </script> - Javascript 代码： view sourceprint?01 var tpl = 'Hi, {@include "#subTpl", subData}, End.'; 02 03 juicer(tpl, { 04 subData: { 05 name: 'juicer' 06 } 07 }); 08 09 //输出 Hi, I'm sub content, juicer, End. 10 //或者通过数据引入子模板，下述代码也将会有相同的渲染结果： 11 12 var tpl = 'Hi, {@include subTpl, subData}, End.'; 13 14 juicer(tpl, { 15 subTpl: "I'm sub content, ${name}", 16 subData: { 17 name: 'juicer' 18 } 19 }); 一个完整的例子 HTML 代码: view sourceprint?01 <script id="tpl" type="text/template"> 02 <ul> 03 {@each list as it,index} 04 <li>${it.name} (index: ${index})</li> 05 {@/each} 06 {@each blah as it} 07 <li> 08 num: ${it.num} <br /> 09 {@if it.num==3} 10 {@each it.inner as it2} 11 ${it2.time} <br /> 12 {@/each} 13 {@/if} 14 </li> 15 {@/each} 16 </ul> 17 </script> Javascript 代码: view sourceprint?01 var data = { 02 list: [ 03 {name:' guokai', show: true}, 04 {name:' benben', show: false}, 05 {name:' dierbaby', show: true} 06 ], 07 blah: [ 08 {num: 1}, 09 {num: 2}, 10 {num: 3, inner:[ 11 {'time': '15:00'}, 12 {'time': '16:00'}, 13 {'time': '17:00'}, 14 {'time': '18:00'} 15 ]}, 16 {num: 4} 17 ] 18 }; 19 20 var tpl = document.getElementById('tpl').innerHTML; 21 var html = juicer(tpl, data); |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。