HTML 출력을 위해 InnerHTML 사용을 포기하세요. jQuery Tmpl은 Detail_jquery에서 설명되지 않습니다.

在Ajax横道的今天，我们在页面交互上有了更高的要求，动态生成HTML毫无疑问是其中的一种。动态生成HTML的方式多种多样，其核心不外乎在前段（JS）或者后端（C#/PHP…）将数据组装成我们想要的模版，最终通过一定的方法输出给用户（innerHTML、documentWrite等方式）。

缺点

1）拼接字符串的过程容易出错，常常忘了'/”>等匹配的符号。
2）修改前台模版的同时容易遗忘同步更改动态生成的模版。
3）拼接字符串不直观和美观，不利于查找错误，例如：数据中如果存在HTML内容，会导致种种麻烦。
4）不能满足较高的业务逻辑需求，处理判断较为麻烦，例如：当A情况生成X模版，B情况生成Y模版。
5）复用性低，较为相似的模版难以公用。

需求

1）简单，直观的模版
2）易于维护（方便查找错误，有代码着色等）
3）模版的可复用性
4）处理一定的逻辑判断

解决方案

基于以上的缺点，jQuery Tmpl这个插件能够很好的满足了我们的需求。使用这种新型的模版技术仅仅需要引入jQuery Tmpl这个插件而已。该插件十分小巧（5.97KB），对于性能的影响并不大。而且据闻这个插件是Microsoft开发的，对于ASP.NET MVC的友好度是大大的。 点击这里进去项目地址

 

通过图片我们能够很直观的看到Tmpl的工作原理，我们仅仅需要提供数据和模版。数据我们能够通过后台的Json方法直接传到前台，而模版则是接下来要讲的东西了。

1）模版代码写在哪里？

复制代码 代码如下:

我们可以看到其实模版代码的容器就是我们的<script>标签，不过type类型是'text/x-jquery-tmpl'而不是我们平常用的'text/javascript'而已，type类型难记？没关系，在Visual Studio2012中已经有了这个类型的智能提示了（没有验证过2010）。</script>

2）模版的语法

我把jQuery Tmpl的语法分为三大类：

1.显示类：

{{html }} / {{= }} / ${ }，这三个标签都能够将数据输出到模版中，但是{{html}}不会对数据进行编码，用于输出数据中的HTML代码段的，而{{=}}和${}则会对数据进行编码，防止数据对于模版结构的破坏。

模版代码：
数据及JS代码：
页面效果：

当我们把data里面的name的值换成一段HTML'点击有好玩的东西哟！'就可以看到{{html }} / {{= }} / ${ }的区别了。

页面效果：

由此我们可以见得使用{{html}}来输出模版里面的内容是带有一定的风险的（XSS攻击），所以在非确定数据的安全性下最好还是使用${}来输出内容既简单又简洁。当然直接输出内容远远不能满足我们的要求，如果能够调用函数来处理一下输出结果就更棒啦！

模版代码：
函数代码：
页面效果：

2.条件判断及循环：

{{if}} / {{else}} / {{/if}} / {{each}} 请注意是没有for / while / switch的，相对于来说jQuery Tmpl只支持较为简单的逻辑判断，当然如果你感觉这些满足不了你的需求的话，可以自己写函数然后再调用。给一个简单的例子来说明一下：

模版代码：
数据及JS代码：
页面输出：

在代码中我们可以注意到{{each}}是有两种写法的，如果不在each后面加(i, v)时在{{each}}代码块中使用$value特指当前项的值，而你需要项的序号则可以使用{{each(i, v) }}其中i代表当前项的次序、v代表当前项的值。如果你的条件判断比较复杂则可以使用函数来判断（完全和JS一样）

例如：效果是和上面的完全一样。

3.复用类

{{temp}}  当分支模版过长（写在一个模版中较为混乱）或者使用已经写好的通用模版，{{temp}}的作用就是调用指定ID模版来显示数据。

模版代码：

这个模版的最终效果和之前的完全一样，不过分别区分独立开来。提高了代码的可阅读性和复用性。在这里只是一次性调用其他模版，如果想循环调用呢？例如在例子当中输出兴趣爱好那样。让我们来看看代码应该如何写。

模版代码：

其中在eachTemplate模版中用$data来特指传进来的遍历项的值。怎么样感觉还是相当方便的吧^_^。

{{wrap}}使用于指定模版来包含当前模版，类似于指定母版页当前模版则属于子页面。

模版代码：
页面效果：

我们可以看出'wrapTemplate'的功效就是作为公共部分，在模版中用{{html $item.html}}来输出子页面的HTML内容。
其中$item.html还具备一定的筛选功能。

模版代码：
页面效果：

여기서는 두 번째 P만 출력되는 것을 볼 수 있습니다. $item.html 메소드에는 $item.html(filter, textOnly) 옵션도 있습니다. textOnly가 true인 경우 요소의 텍스트만 출력되고 원래 요소 태그는 무시됩니다.

模版代码：
页面效果：

strong 요소는 굵은 효과가 없고 텍스트만 있는 것을 볼 수 있습니다.

요약

사실 템플릿의 일부 고급 기능은 사용 중에 자주 사용되지 않습니다. 이 글에서는 jQuery Tmpl에 대한 몇 가지 기본적인 사항만 소개합니다. 이 플러그인을 사용하면 많은 이점을 얻을 수 있습니다. HTML 코드 조각(JS 파일의 접합 문자열)을 동적으로 출력할 때 첫 페이지를 수정하고 JS에서 접합 문자열을 수정하는 것을 잊어버리는 경우가 자주 있습니다. 설명할 수 없는 오류와 다중 분기 판단에서 문자열을 이어붙이는 것의 단점이 더 분명해졌습니다. 이제 코드가 생성될 위치에 Tmpl 템플릿 코드를 첫 페이지에 넣어두므로 오류가 크게 줄어듭니다.

위 내용에는 ASP.NET과의 상호 작용이나 고급 응용 기술이 포함되어 있지 않습니다. 모두 반응이 좋으면 ASP.NET MVC와 결합된 특별한 응용 기사를 작성하겠습니다~^_^