最近在调试ajax程序的时候,要格式化数据输出html,代码比较混乱,这时候就比较怀念php里可以用到的各式各样的模板.然而js毕竟是很强大的,俺找到了这个javascript写的template类 -- Jemplate,用法还算简单.
首先得包含必要的文件:
PLAIN TEXT HTML:
- <script language="javascript" src="./prototype.js"> </script>
- <script language="javascript" src="./lyase_view.js"> </script>
模板可以写在当前html里,也可以写在单独的模板文件:
PLAIN TEXT HTML:
- <!--模板定义在textarea标签里了-->
- <textarea id="template" style="display:none">
- The Value of x is: <%= context.x%>
- </textarea>
- <!--赋值,上面的<%= context.x%>将被替换-->
- <script>document.write(Lyase.View.render({element:"template"}, {x : 10})); </script>
如果模板写在单独的文件里:
PLAIN TEXT HTML:
- <script>document.write(Lyase.View.render({file:"tmp.tpl"}, {x : 10})); </script>
模板tmp.tpl的内容为:
PLAIN TEXT HTML:
- The value of x is: <%= context.x%>
甚至还可以支持复杂的循环:
PLAIN TEXT HTML:
- <textarea id="template" style="display:none">
- <% context.list.each(function(pair){%>
- The value of <%= pair.name %> is: <%= pair.value%>
- <% }) %>
- </textarea>
PLAIN TEXT JAVASCRIPT:
- //code
- document. write (Lyase. View. render ( {element: "template" }, {list : [ { name : "x", value : 10 }, { name : "y", value : 20 } ] } ) );
很可惜的是,我测试的时候,这东东只能utf-8环境下跑的很好,gb2312会被显示为乱码,估计是Prototype的ajax在post的时候出现的问题
更多的例子看这里:
http://inforno.net/articles/2006/02/15/the-embed-javascript-implementation