template.helper(name, callback)
name:必传,辅助事件的名称。
callback:必传,辅助事件的回调函数。
return:undefined
所谓的辅助事件,主要用于处理一些参数。
例如:性别,我们通常存储0和1来表示女和男,但是界面其实要展示的是“女”和“男”字符串信息。
1、使用helper()方法来实现男女的展示:
<div id="user_info"></div> <script src="../js/template.js" type="text/javascript" charset="utf-8"></script> <script type="text/html" id="user_tmpl"> <div>姓名:<span>{{name}}</span></div> <div>性别:<span>{{sex | getSexName}}</span></div> <div>学校:<span>{{school}}</span></div> </script> <script type="text/javascript"> var data = { name: "小明", sex: 1, school: "新华小学" }; template.helper("getSexName", function(data) { if (data == "0") { return "女"; } else { return "男"; } }); var user = template("user_tmpl", data); document.getElementById("user_info").innerHTML = user; </script>
由示例可以看出,辅助事件是在调用渲染函数前定义的,使用的写法为{{参数的值 | 辅助事件名称}}。
2、采用artTemplate.js的if语法实现:
<div id="user_info"></div> <script src="../js/template.js" type="text/javascript" charset="utf-8"></script> <script type="text/html" id="user_tmpl"> <div>姓名:<span>{{name}}</span></div> <div>性别:<span>{{if sex==0}}女{{else}}男{{/if}}</span></div> <div>学校:<span>{{school}}</span></div> </script> <script type="text/javascript"> var data = { name: "小明", sex: 1, school: "新华小学" }; var user = template("user_tmpl", data); document.getElementById("user_info").innerHTML = user; </script>
从例子我们看出,if是需要开始和结束的,如果有其他条件判定,则直接使用{{else}}即可。