Ajax模板的使用

来源:互联网 发布:linux 设置dns解析 编辑:程序博客网 时间:2024/05/16 00:59
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><button id="btn">Button</button><script src="js/jquery-1.10.1.min.js"></script><script src="js/handlebars.js"></script><script id="mytemplate" type="text/x-handlebars-template"><ul>{{#each urls}}<li><a href="{{url}}">{{text}}</a></li>{{/each}}</ul></script><script>$(function(){$("#btn").click(function(){//1. 获取script中定义的内容var source = $("#mytemplate").html();//2. 将定义的内容编译var template = Handlebars.compile(source);//3. 传入json替换{{}}中的值,输出htmlvar data = {"urls":[{"text":"hello1","url":"http://www.sina.com"},{"text":"hello2","url":"http://www.sina.com"},{"text":"hello3","url":"http://www.sina.com"}]};var html = template(data);console.log(html);$(html).appendTo($("body"));});});</script></body></html>

0 0
原创粉丝点击