Give up using your InnerHTML to output HTML. jQuery Tmpl will not be explained in 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）模版代码写在哪里？

复制代码 代码如下:

我们可以看到其实模版代码的容器就是我们的

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

3

2065

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

11

2229

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

1873

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1756

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1788

Related Topics

More>

• bootmgr is missing and cannot boot
• How to update graphics card driver
• border-radius
• Solution to the problem that exe files cannot be opened in win10 system
• How to fix winntbbu.dll missing
• Implement 301 jump method through js code
• What does wifi deactivated mean?
• How to import mdf files into database