放弃使用你的InnerHTML来输出HTML jQuery Tmpl就不详细解释了

在今天的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)，对性能影响不大。而且据报道，这个插件是微软开发的，对ASP.NET的MVC非常友好。点击此处输入项目地址。

通过图片，我们可以直观的看到Tmpl的工作原理，只需要提供数据和模板。我们可以在后台通过Json方法将数据直接发送到前台，模板是接下来要讲的。1)模板代码写在哪里？复制的代码如下： script type=' text/x-jquery-tmpl ' id=' test template '/*模板代码*//script。我们可以看到模板代码的容器其实是我们的脚本标签，但是类型是‘text/x-jquery-tmpl’而不是‘text/JavaScript’，很难记住。没关系，这种类型的智能提示在Visual Studio2012中已经存在(2010年没有验证)。2)模板的语法我把jQuery Tmpl的语法分为三类：1。显示类：{{HTML }}/{{=}}/${}，所有这些都可以向模板输出数据，但是{{HTML }}不编码数据，而是{{=}}和$。模板代码：

以及JS代码：。

页面效果：

当我们将数据中名称的值改为html ' a href=' http://www . Google.com '时，点击一些有趣的东西！/a '您可以看到{{html }}/{{=}}/${}之间的区别。页面效果：

由此可以看出，使用{{html}}输出模板中的内容存在一定的风险(XSS攻击)，因此在数据安全性不确定的情况下，最好使用$ {}输出内容，简单简洁。当然，直接输出远远不能满足我们的需求，所以如果我们能调用函数来处理输出结果就更好了！模板代码：

功能代码：

页面效果：

2.条件判断和循环：{ { if }}/{ { else } }/{ {/if } }/{ {每个} }请注意，没有for/while/开关。相对来说，jQuery Tmpl只支持相对简单的逻辑判断。当然，如果你觉得这些不能满足你的需求，你可以自己写函数，然后调用。举个简单的例子来说明：模板代码：。

以及JS代码：。

页面输出：

在代码中，我们可以注意到{ {每个}}是以两种方式编写的。如果(I，v)没有在每个之后添加，$value在{{each}}代码块中用于专门引用当前项目的值，如果需要项目序列号，可以使用{{each (i，v)}，其中I表示当前项目的顺序，v表示当前项目的值。如果你的条件判断比较复杂，可以用函数来判断(和JS完全一样)，比如：。

效果和上面一模一样。3.重用类{{temp}}当分支模板太长(写在一个模板中比较混乱)或者使用已经写好的通用模板时，{{temp}}的作用是调用指定的ID模板显示数据。模板代码：

这个模板的最终效果和以前完全一样，但是它是独立的。提高了代码的可读性和可重用性。在这里，我们只调用其他模板一次。如果我们想循环调用它们呢？例如，在示例中输出爱好。让我们看看代码应该如何编写。模板代码：

在每个模板中，$data用于指定传入遍历项的值。你感觉如何？挺方便的。{{wrap}}用于指定包含当前模板的模板，与指定母版页相似的当前模板属于子页。模板代码：

页面效果：

我们可以看到‘wrap template’的效果是将模板中的{{HTML $item.html}}作为公共部分输出子页面的HTML内容。其中，$item.html也有一定的过滤功能。模板代码：

页面效果：

可以看到这里只输出了第二个p。$item.html方法还有一个选项$item.html(过滤器，textOnly)。Textonly是布尔值。如果为真，它将只输出元素的文本，而忽略其原始元素标记。模板代码：

页面效果：

可以看到强元素没有加粗效果，只有文字。事实上，模板的一些高级功能在使用总结的过程中并不经常使用。本文只介绍jQuery Tmpl的一些基本情况。使用这个插件可以给我们带来很多好处。以前动态输出HTML代码段(JS文件中的拼接字符串)时，经常修改前台页面，忘记修改JS中的拼接字符串，导致一些莫名其妙的错误。而且在多分支的判断下，拼接字符串的弊端更加明显。现在，我将把Tmpl模板的代码放在前台页面上要生成代码的地方，这样就大大减少了错误的发生！以上内容不涉及与ASP.NET的互动，以及更高级的应用技巧。反思好了，就结合ASP.NET MVC ~ _，写一篇应用文章。