看《基于MVC的JavaScript Web富应用开发》了解到jquery.tmpl插件,试用了一下,感觉不错,如果在拼接字符串很麻烦(特别字符串中又有字符串,双引号与单引号滥用时),可以使用这种方法,下面是练习的小实例(插件可以网上搜,不知道csdn能不能贴外链,没有放上去)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <script type="text/javascript" src="jquery/jquery-1.10.2.js"></script> <!--引入tmpl插件--> <script type="text/javascript" src="jquery/jquery.tmpl.js"></script> <script type="text/javascript"> var object = { url: "http://example.com", getName: function(){ return "Trevor"; } }; var template = '<li><a href="${url}">${getName()}</a></li>'; var element = jQuery.tmpl(template, object); $("body").append(element); //使用{{if url}}...{{/if}}或{{if messages.length}}...{{else}}...{{/if}}来进行逻辑判断 var elements = { url:"http:", name:'test' } template = '<li><a href="${url}">{{if name == "trst"}}${name == "trst"}{{else}}no name{{/if}}</a></li>'; var t = jQuery.tmpl(template,elements); $("body").append(t); //使用{{each}}进行循环逻辑,$index 访问迭代下标,$value访问迭代变量 var arrayElement = { elements:['home','back','link'] } template = '<ul>{{each elements}}<li>${$index + 1}: <em>${$value}</em></li>{{/each}}</ul>'; $("body").append ($.tmpl(template,arrayElement)); </script> </body> </html>
它还有一个强大之处是你可以自定义脚本标签并能过ID去引用标签。如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <script type="text/javascript" src="jquery/jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery/jquery.tmpl.js"></script> <!-- 自定义脚本标签 --> <script type="text/x-jquery-tmpl" id="someTemplate"> <span>${getName()}</span> </script> <script> var data = { getName: function(){ return "Bob" } }; //通过JavaScript的ID引用 var element = $("#someTemplate").tmpl(data); element.appendTo($("body")); </script> </body> </html>