前两天写前端遇到很多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. Android学习Scroller(五)——具体解释Scroller调用过程以及View的重绘

    PS: 该篇博客已经deprecated,不再维护.详情请參见  站在源代码的肩膀上全解Scroller工作机制  http://blog.csdn.net/lfdfhl/article/detail ...

  2. DOM基础：table（表格）

    1. table元素的相关属性 tBodies 一个table可以有多个tBody tHead 一个table只有一个tHead tFoot  一个table只有一个tFoot rows 一个tabl ...

  3. MySQL设置密码复杂度

    MySQL5.6.6版本之后增加了密码强度验证插件validate_password,相关参数设置的较为严格.使用了该插件会检查设置的密码是否符合当前设置的强度规则,若不满足则拒绝设置. 本文采用测试 ...

  4. LeetCode - 703. Kth Largest Element in a Stream

    Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...

  5. 机器学习 —— 深度学习 —— 基于DAGNN的MNIST NET

    DAGNN 是Directed acyclic graph neural network 缩写,也就有向图非循环神经网络.我使用的是由MatConvNet 提供的DAGNN API.选择这套API作为 ...

  6. webpack简介与使用

    欢迎小伙伴们为 前端导航仓库 点star https://github.com/pfan123/fr...前端导航平台访问 CommonJS 和 AMD 是用于 JavaScript 模块管理的两大规 ...

  7. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  8. js运用6

    ---恢复内容开始--- 1.   逻辑运算   ||      &&       ! || 遇到第一个为true的数字就终止并返回,如果完全没有就返回最后一个值 && ...

  9. Django中URL有关

    django 模板中url的处理   在模板中直接添加‘/home’这样的链接是十分不推荐的,因为这是一个相对的链接,在不同网页中打开可能会返回不一样的结果. 所以推荐的是 1 <a href= ...

  10. jmeter安装与环境变量配置

    因jmeter是java开发的,要想运行java开发的程序,必须先下载JDK一.jdk 1.下载jdk  jdk下载地址:https://www.oracle.com/technetwork/java ...