js中的template — Jemplate

最近在调试ajax程序的时候,要格式化数据输出html,代码比较混乱,这时候就比较怀念php里可以用到的各式各样的模板.然而js毕竟是很强大的,俺找到了这个javascript写的template类 -- Jemplate,用法还算简单.

首先得包含必要的文件:

PLAIN TEXT

HTML:

1. <script language="javascript" src="./prototype.js"> </script>
2. <script language="javascript" src="./lyase_view.js"> </script>

 

模板可以写在当前html里,也可以写在单独的模板文件:

PLAIN TEXT

HTML:

1. <!--模板定义在textarea标签里了-->
2. <textarea id="template" style="display:none">
3.  The Value of x is: <%= context.x%>
4. </textarea>
5. <!--赋值,上面的<%= context.x%>将被替换-->
6. <script>document.write(Lyase.View.render({element:"template"}, {x : 10})); </script>

 

如果模板写在单独的文件里:

PLAIN TEXT

HTML:

1. <script>document.write(Lyase.View.render({file:"tmp.tpl"}, {x : 10})); </script>

 

模板tmp.tpl的内容为:

PLAIN TEXT

HTML:

1. The value of x is: <%= context.x%>

 

甚至还可以支持复杂的循环:

PLAIN TEXT

HTML:

1. <textarea id="template" style="display:none">
2. <% context.list.each(function(pair){%>
3.       The value of <%= pair.name %> is: <%= pair.value%>
4. <% }) %>
5. </textarea>

 

PLAIN TEXT

JAVASCRIPT:

1. //code
2. 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