前两天写前端遇到很多table 和 表单需要拼接的问题 ， 一堆的字符串 ， 页面显得冗长，又不好维护。于是有了下文。

话不多说，上代码：

首先引用一个js文件：

<script src="~/Content/js/tmpl.min.js"></script>

　　前台：

 　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　<body>
　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　<p id="result">

                                <script type="text/x-tmpl" id="tmp">

　　　　　　　　　　　　　　　　　　　　　//“o”官方给的解释是对模板函数的数据参数的引用

                                    <span>{%=o.name%}</span>

                                    <span>{%=o.sex%}</span>

                                    <table class="table table-">

                                    {% for(var i=0;i<o.list.length;i++){ %}

                                    <tr><td>a</td><td>{%=o.list[i].a%}</td></tr>

                                    <tr><td>b</td><td>{%=o.list[i].b%}</td></tr>

                                    {% } %}

                                    </table>

                                </script>

                            </p>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　</body>

     <script>

    $(document).ready(function () {

        GetData();

    });

    function GetData() {

        $.ajax({

            type: "get",

            url: "/default1/data",

            dataType: "json",

            success: function (obj) {

                //obj是字符串，转成json对象需要加"("+obj+")"

                var o = eval("("+obj+")");

                document.getElementById("result").innerHTML = tmpl('tmp', o);

            }

        });

    }

</script>

　　数据从这里来：

 public JsonResult Data()

        {

            var json = "{'name':'小明','sex':'男','list':[{'a':'1','b':'2'},{'a':'3','b':'4'}]}";

            return Json(json, JsonRequestBehavior.AllowGet);

        }

　　附带tmpl.js:https://files.cnblogs.com/files/tony-brook/JavaScript-Templates-3.6.0.rar

javascript Template tmpl的更多相关文章

  1. 如何选择Javascript模板引擎（javascript template engine)？

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  2. jquery.tmpl.js使用外部 jQuery Template文件

    $.get('/js/templates/filename.html', function(template) { $.tmpl(template, data).appendTo('#whatever ...

  3. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  6. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  7. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  8. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

随机推荐

  1. 基于ARM9和嵌入式Linux系统的多功能综合通信控制系统的框架

    基于ARM9硬件平台和嵌入式Linux系统的多功能综合通信控制系统的框架设计及各模块的功能.系统采用符合POSIX．1标准的C语言编写,实现了对下位机传送数据帧的采集.分析和存储,并能根据上位机的配置 ...

  2. kafka---->kafka connect的使用(一)

    这里面介绍一下kafka connect的一些使用. kafka connect的使用 一.在config目录下面复制一个file-srouce.properties并且修改内容 huhx@gohuh ...

  3. 转载：margin外边距合并问题以及解决方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 解决：Windows安装Composer及全局配置时提示部分.dll结尾的php扩展文件找不到指定的模板

    当安装Composer或者全局配置时出现.dll扩展文件找不到指定模板,如下图: 解决办法: 打开php.ini,将extension_dir 改为绝对路径即可 例如:

  5. Less 编译生成 css

    开发模式下使用less.js <link rel="stylesheet/less" type="text/css" href="~/Conte ...

  6. <?php if($value['udertype'] == 0) {?> <td>超级管理员</td> <?php } else if ($value['udertype'] == 1)

    <?php if($value['udertype'] == 0) {?> <td>超级管理员</td> <?php } else if ($value['u ...

  7. 关于c++中前++后++运算符重载问题

    #include<iostream> using namespace std; class Complex{ public: Complex(int a,int b){ this-> ...

  8. HTML、CSS知识点,面试开发都会需要--No.3 盒子模型

    No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...

  9. Android无法删除项目+导入项目报错

    Android无法删除项目+导入项目报错 Android无法删除项目:关闭eclipse或关闭电脑,然后重启,继续删除就可以了 导入项目报错:右键–>配置–>中就可以看到了,更改一下就可以 ...

  10. ASP.NET MVC Routing Debugger路由调试工具

    官网地址:http://blog.csdn.net/sgear/article/details/6789882 To  use this, simply download the following ...