假定服务端返回的 JSON 数据为如下格式（长度为10的数组对象）：
使用（+）拼接字符串
前端想要将数据渲染至页面，最基本的做法是通过拼接 HTML 字符串，然后插入至 DOM 树中。假设我们现在想将这段数据显示在一个 TABLE 中。我们在 AJAX 回调函数中，可能需要 FOR 循环，然后在循环中使用（+）去拼接 TR、TD 标签。
当然，这个 JSON 数据格式非常简单，实际业务中，往往会比之更为复杂。
通常表格中每一行最后会有“操作按钮组”，如“编辑按钮”，“删除按钮”，部分单元格点击后可能会出现模态框用以显示详情或者其他业务操作等等。
拼接出来的“HTML 代码”字符串，在 DEBUG 或缩进等等操作时，意味着不便，尤其在交接项目时，刚接触项目的同事看到每一个 AJAX 回调里面都包含着一大坨字符串拼接，心里觉对是崩溃的。
当需要在表格中加新列了，或者重写绑定事件了等等多人合作时，问题尤为突出。
使用（/）拼接字符串
用这种方式拼接字符串，在你的 JAVASCRIPT 代码中，HTML 结构会更直观，趋近于在 .html 文件中查看，不够写起来比较费劲，在编辑器没有高亮支持的情况下，可能效果还不如字符串直接拼接。
使用（jquery-tmpl）渲染
前端常用的“模板引擎”有很多，我常用的是 jquery-tmpl 。和其他 jQuery Plugins 一样，引用后，扩展出的 $.tmpl() 方法，可以仅仅使用一行代码，就完成上述拼接字符串的插入 DOM 树的效果。
首先需要在你的 .html （视图）文件中，标记出你的 HTML 模板：
接着，回到 AJAX 回调函数中，将数据使用这个 id 为 table-template 的模板进行视图渲染：
这是一个更完善的效果图：
jquery-tmpl 支持在 .html 中标记模板，也支持在 .js 中标记模板字符串变量，我个人更倾向于在 .html 中书写模板，这样会比较直观，给 IDE 稍微配置下，也能拥有高亮的效果。
给 DOM 元素绑定事件
实际的业务开发中，常常会遇到 TABLE 中需要“操作按钮组”、“某个单元格点击出现其他操作”等等特殊的需求。这个时候，我们需要为“由模板渲染出来”的 DOM 元素绑定点击等事件。
为什么需要强调 DOM 元素是由模板渲染出来的？这个概念决定了为这些 DOM 元素绑定事件的时机！
上图中列表便是使用模板渲染出来，现在需要为每一个列表增加点击事件，点击后会做一些额外操作，如显示一个模态框，或者再向服务端发出一次请求等等。现在每个列表的父容器均为 div，它的 class name 均为 item。
如果你在 AJAX 回调函数之外，给模板中的 DOM 元素绑定相关事件，你所绑定的任何事件都会失效，这样绑定的方式是错误的。因为你在给这些 DOM 元素绑定事件时，他们还未真正的插入到 DOM 树中。如下图：
你需要在模板渲染完成，并插入至 DOM 树中，这一时刻进行事件绑定：
更优雅的绑定方式
和 HTML 字符串拼接一样，将太多的业务写在一个 AJAX 回调函数中，会使该函数变的越来越臃肿。同样的，假设这个模板中，我们有10个元素需要绑定事件或进行其他 DOM 操作，都写在 $.tmpl() 后面，似乎不是那么优雅。
jQuery 的 delegate() API 正是用来“给未来元素绑定事件”。
希望对你有所帮助！
