JavaScript对Ajax生成节点的JS模板化
Posted yongh701
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript对Ajax生成节点的JS模板化相关的知识，希望对你有一定的参考价值。
在《【javascript】兼容IE6的JS模板化》（点击打开链接）和《【jQuery】利用jTemplates实现兼容IE6的jQuery模板化》（点击打开链接）我曾经提到如何分别在javascript和jquery完成前端模板化，让前端代码规范起来。不过现在的许许多多的网页框架，好像Springmvc和Thinkphp甚至连微软的ASP.NET都有自家的一套，将前端后端形成起来，根本无须这些JS、JQ模板化插件干预，即可以完成前端的模板化。然而，这些JS、JQ模板化还是有派得上场的时候，因为你确实会遇到有些网页节点要经历一系列js，经过ajax完成一系列操作之后，才能生成。
譬如，如下图，要用户点击按钮才能生成一些节点
那么如何对Ajax生成节点的JS模板化呢？本文将说明这个问题。
一、JS模板化组件template.js对Ajax生成节点的JS模板化
上面这段代码你打算怎么写呢？如果还是像下面这种写法，那么很容易，在js部分，写很多html的代码。而且一般情况，在网页拼节点肯定不只是就<h1></h1>样式这么简单。常常伴随着<div style=""></div>这样一大串东西。就算你将js代码的html部分排版得再怎么好，这还是会导致你的js代码很难看，毕竟html是html，js是js。你在html写<></>这样的双节点，肯定是满满的违和感。
<!DOCTYPE html>
<html>
<head>
<title>Template_Js</title>
</head>
<body>
<button οnclick="ajax_generation()">点击生成一行</button>
<div id="generation">
</div>
</body>
<script>
function ajax_generation()
alert("经历了一系列ajax运算之后");
var a=Math.random();
document.getElementById('generation').innerHTML += "<h1>"+a+"</h1>";
</script>
</html>根据《【JavaScript】兼容IE6的JS模板化》（ 点击打开链接）介绍过的template.js原理，我们完全可以将传统写法的js中的html代码，移回html部分。如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Template_Js</title>
</head>
<body>
<button οnclick="ajax_generation()">点击生成一行</button>
<div id="generation"><!--一般要渲染的部分给个id-->
</div>
<script id="generation_tpl" type="text/html"><!--指明需要被template.js渲染的部分-->
<h1>a=<%:=a%></h1>
</script>
</body>
<script src="template.js"></script><!--引入的template.js，这里的引入必须在body节点之下，否则可能无法对上面的模板渲染-->
<script>
function ajax_generation()
alert("经历了一系列ajax运算之后");
var html = template(document.getElementById('generation_tpl').innerHTML,
a:Math.random()
);
document.getElementById('generation').innerHTML += html;
</script>
</html>你需要在js生成什么，在id为generation_tpl的script写好一个模板，有数据渲染的部分，用template.js的方法写好，比如，这里的<%:=a%>就会被替换成Math.random()。
因为<script id="generation_tpl" type="text/html">是在html部分的body节点中，所以写下script下的html的东西，就能被任何html代码的ide完美解释。
二、JQ模板化组件jTemplates对Ajax生成节点的JS模板化
那么在JQ下，用jTemplates则如何写呢？这个组件，有点麻烦，因为这个组件貌似只是考虑到前端模板化的事情，似乎对Ajax生成节点的JS模板化欠缺考虑，但不代表不能完成，虽然代码写多了一点。具体如下：
<!DOCTYPE html>
<html>
<head>
<title>jTemplates</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-jtemplates.js"></script>
</head>
<body>
<button οnclick="ajax_generation()">点击生成一行</button>
<textarea id="generation_tpl" style="display:none">
<h1>a=$T.a</h1>
</textarea>
<div id="generation"><!--指明要被模板化的段落，给一个id-->
</div>
</body>
<script>
function ajax_generation()
alert("经历了一系列ajax运算之后");
var data =
a: Math.random()
;
var id=Math.random();
$("#generation").append("<p></p>");
$("#generation>p:last").setTemplateElement("generation_tpl").processTemplate(data);
//template指上面要实现模板化的id，这里的data就是上面存放模板化数据的json变量名
</script>
</html>这里由于，不像template.js是先在javascript生成一个html，再自己手动用document.getElementById('generation').innerHTML=xx的方法放到html代码之中，而是直接封装好一个方法setTemplateElement将一个网页节点内的东西全部给替换，所以，我们需要先利用jquery，用append或者prepend，在该节点最前面或者最后面添加一个div或者p节点，再利用:first或者:last找到第一个div或者p或者最后一个div和p，也就是我们自己生成的东西，再利用方法setTemplateElement将模板<textarea id="generation_tpl" style="display:none">下面的东西放到<div id="generation">我们生成的div或者p节点当中，以免替换掉<div id="generation">里面原有的东西。
至于jquery对网页节点的增删改查不熟悉者，可以参考《【jQuery】对网页节点的增删改查》（点击打开链接）。
以上是关于JavaScript对Ajax生成节点的JS模板化的主要内容，如果未能解决你的问题，请参考以下文章
如何使用Django模板在javascript中访问ajax jquery中的模板变量