juicer 入门教程
景仲渊
juicer官方介绍
https://github.com/PaulGuo/Juicer
http://juicer.name/
juicer(tpl, data);
// 仅编译模版暂不渲染，它会返回一个可重用的编译后的函数. 根据给定的数据，对之前编译好的模板进行数据渲染.
var compiled_tpl = juicer(tpl);
var html = compiled_tpl.render(data);
// 注册/注销自定义函数（对象），在下边 ${变量} 中会有实例.
juicer.register('function_name', function);
juicer.unregister('function_name');
// 自定义模板语法边界符，下边是 Juicer 默认的边界符。你可以借此解决 Juicer 模板语法同某些后端语言模板语法冲突的情况.
juicer.set({
'tag::operationOpen': '{@',
'tag::operationClose': '}',
'tag::interpolateOpen': '${',
'tag::interpolateClose': '}',
'tag::noneencodeOpen': '$${',
'tag::noneencodeClose': '}',
'tag::commentOpen': '{#',
'tag::commentClose': '}'
});// 默认配置是 Juicer 推荐的使用方式，如果你使用过程中的确需要更改这些参数，可以这么做：
逐条参数更改：
juicer.set('strip',false);
juicer.set('cache',false);
批量参数更改：
juicer.set({
'strip': false,
'cache': false
});
${变量}
使用 ${} 输出变量值，
转义/避免转义
出于安全角度的考虑，${变量} 在输出之前会对其内容进行转义，如果你不想输出结果被转义，可以使用 $${变量} 来避免这种情况
内联辅助函数 {@helper} ... {@/helper}
如果你需要在页面或者模板内定义辅助函数，可以像这样使用 `helper`，同时支持Node和Browser.
<!--
{@helper numberPlus}
function(number) {
return number + 1;
}
{@/helper}
-->
var tpl = 'Number: ${num|numberPlus}';
juicer(tpl, {
num: 123
});
//输出 Number: 124
循环遍历 {@each} ... {@/each}
如果你需要对数组进行循环遍历的操作，就可以像这样使用 `each` .
{@each list as item}
${item.prop}
{@/each}
如果遍历过程中想取得当前的索引值，也很方便.
{@each list as item, index}
${item.prop}
${index} //当前索引
{@/each}
判断 {@if} ... {@else if} ... {@else} ... {@/if}
我们也会经常碰到对数据进行逻辑判断的时候.
{@each list as item,index}
{@if index===3}
the index is 3, the value is ${item.prop}
{@else if index === 4}
the index is 4, the value is ${item.prop}
{@else}
the index is not 3, the value is ${item.prop}
{@/if}
{@/each} 注释 {# 注释内容}
为了后续代码的可维护性和可读性，我们可以在模板中增加注释.
{# 这里是注释内容}
辅助循环 {@each i in range(m, n)}
辅助循环是 Juicer 为你精心设置的一个语法糖，也许你会在某种情境下需要它.
{@each i in range(5, 10)}
${i}; //输出 5;6;7;8;9;
{@/each}
子模板嵌套 {@include tpl, data}
子模板嵌套可以让你更灵活的组织你的模板代码，除了可以引入在数据中指定的子模板外，当然你也可以通过指定字符串`#id`使用写在`script`标签中的模板代码.
HTML代码：
<script type="text/juicer" id="subTpl">
I'm sub content, ${name}
</script>
Javascript 代码：
var tpl = 'Hi, {@include "#subTpl", subData}, End.';
juicer(tpl, {
subData: {
name: 'juicer'
}
});
//输出 Hi, I'm sub content, juicer, End.
//或者通过数据引入子模板，下述代码也将会有相同的渲染结果：
var tpl = 'Hi, {@include subTpl, subData}, End.';
juicer(tpl, {
subTpl: "I'm sub content, ${name}",
subData: {
name: 'juicer'
}
});
测试
<script type="text/javascript" src="../../javascript/jquery.js"></script>
<script type="text/javascript" src="../../javascript/juicer-min.js"></script>
<script type="text/javascript" src="../../javascript/jquery.json-2.3.js"></script>
<script type="text/javascript">
function renderToHtml(data){
var tpl = document.getElementById('tp1').innerHTML;
var html = juicer(tpl, data);
//alert(html);
jQuery("#content").html(html);
}
window.οnlοad=function(){
var indexOf = function getValueByIndex(arr,index){
if(arr.length
学校人数:${total} 学校名称: ${xx.name}
{@each cs as it,index}
-----------------------------${cs, index | indexOf}
{@/each}
{@each xslb as it,index}
学号 ${it.no}
姓名${it.name}
年龄 ${it.age}
成绩
{@each it.cj as it2,index}
行号:${index}
名次:${it2.no}
姓名:${it2.name}
成绩:${it2.score}
算术运算:${+it2.score/100}
索引为字符串:${index+1}
索引为数字:${+index+1}
{@/each}
{@/each}
文件名： juicer-1.html
<html>
<script type="text/javascript" src="juicer-min.js"></script> <!-- 引入 juicer -->
<script id="tpl" type="text/template"> <!-- template 模板; 模板内容不会直接显示出来 -->
<div>
<p> HTML script is allowed! </p>
<p> ${name} </p> <!-- ${variableName} juicer调用变量的方式 -->
</div>
</script>
<div id='content'> Original HTML content! </div>
<script type="text/javascript">
window.onload = function(){
alert('breakpoint');
var data=new Object();
data.name="this content is loaded by juicer!" // 定义一个字符串变量
var tpl = document.getElementById('tpl').innerHTML; // 获取模板内容
var tplContent = juicer(tpl, data); // 使用juicer将参数渲染模板
var content = document.getElementById('content');
content.innerHTML=tplContent; // 将内容写到HTML元素展示
}
</script>
</html>
更多使用实例，请参考以下 juicer-2.html 代码：
文件名： juicer-2.html
<html>
<script type="text/javascript" src="juicer-min.js"></script> <!-- -->
<!-- template 模板; 模板内容不会直接显示出来 ;;;; 此处type值可以设置为 type="text/XXX" 默认的javascript会导致浏览器解析出错。 -->
<script id="tpl" type="text/template">
<div>
<p> HTML script is allowed! </p>
<p> ${name} </p> <!-- ${variableName} juicer调用变量的方式 -->
<div>
{# 注释内容 }
<!-- 遍历js数组，将值给指定函数处理 -->
<span style="color:red"> list: </span> <br/>
{@each list as value,index}
{@if value.name=='guokai'}
The value is ${value.name},the index is ${index} <br/>
{@else}
value : ${value.name} ||| index : ${index} <br/>
{@/if}
{@/each}
<span style="color:red"> rows: </span> <br/>
{@each rows as value}
{@if value==1}
The value is ${value} <br/>
{@else if value == 2}
This value ${value} had been decorated : ${ value | decorate } <br/> {# 将变量传给函数处理 }
{@else}
The value is ${value} <br/>
{@/if}
{@/each}
</div>
</div>
</script>
<div>
<p> sub content! </p>
<!-- 新建一个模板，嵌套使用 -->
<script type="text/juicer" id="subTpl">
I'm 1th sub content, ${name}
</script>
</div>
<div id='content'> Original HTML content! </div>
<script type="text/javascript">
window.onload = function(){
alert('breakpoint');
//参数
var data=new Object();
data = {
list: [
{name:' guokai', show: true},
{name:' benben', show: false},
{name:' dierbaby', show: true}
],
name:"this content is loaded by juicer!", // 定义一个字符串变量
rows: [1,2,3]
}
var tpl = document.getElementById('tpl').innerHTML; // 获取模板内容
var tplContent = juicer(tpl); // 模板化tpl
var tplContent = tplContent.render(data);
var content = document.getElementById('content');
// 嵌套一个 subTpl 模板。（第 1 种方式）
var subtpl = '<br/><br/> Hi, {@include "#subTpl", subData}, End.<br/>';
tplContent += juicer(subtpl, {
subData: {
name: 'subJuicer'
}
});
// 嵌套一个 subTpl 模板。（第 2 种方式）
var tpl = 'Hi, {@include subTpl, subData}, End. <br/>';
tplContent += juicer(tpl, {
subTpl: "I'm 2th sub content, ${name}",
subData: {
name: 'juicer'
}
});
content.innerHTML=tplContent; // 将内容写到HTML元素展示
}
</script>
<script type="text/javascript">
// 自定义函数注册给juicer
function decorateString(value){
var newValue = value+10;
return newValue ;
}
juicer.register('decorate', decorateString);
</script>
</html>
</script>
类似资料：