昨天奈何一个朋友一直问我artTemplate的辅助函数怎么用,和他说了一大堆也是懵逼,索性自己再写一个专门关于辅助函数的用法,希望可以帮得到其他有需要的朋友!!!
先展示下整体代码,和效果图,之后我会以图片+文字的方式帮助理解:注意artTemplate.js和zepto.js根据自己的路径来改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
</head>
<body>
<div id="test"></div>
<script type="text/html" id="template_test">
<span>age:{{age | handleAge:'a','b',10}}</span>
</script>
</body>
<script src="../bower_components/template/template.js"></script>
<script src="../bower_components/zepto/zepto.min.js"></script>
<script>
template.helper("handleAge",function (age,arg1,arg2,arg3) {
console.log('age:',age);
console.log('arg1:',arg1);
console.log('arg2:',arg2);
console.log('arg3:',arg3);
return age.toFixed(3);
});
var data = {name: 'aaa', age: 10.1548954444654};
var html = template("template_test", data);
$("#test").html(html);
</script>
</html>
页面效果图:
图文详解: