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

话不多说，上代码：

首先引用一个js文件：

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

　　前台：

  1.  　　　　　　　　　　　　　　　　
    　　　　　　　　　　　　　　<body>
    　　　　　　　　　　　　　　　<div>
    　　　　　　　　　　　　　　　　<p id="result">
  2.                                 <script type="text/x-tmpl" id="tmp">
  3. 　　　　　　　　　　　　　　　　　　　　　//“o”官方给的解释是对模板函数的数据参数的引用
  4.                                     <span>{%=o.name%}</span>
  5.                                     <span>{%=o.sex%}</span>
  6.                                     <table class="table table-">
  7.                                     {% for(var i=0;i<o.list.length;i++){ %}
  8.                                     <tr><td>a</td><td>{%=o.list[i].a%}</td></tr>
  9.                                     <tr><td>b</td><td>{%=o.list[i].b%}</td></tr>
  10.                                     {% } %}
  11.                                     </table>
  12.                                 </script>
  13.                             </p>
    　　　　　　　　　　　　　　</div>
    　　　　　　　　　　　　</body>
  14.  
  15.      <script>
  16.     $(document).ready(function () {
  17.         GetData();
  18.     });
  19.     function GetData() {
  20.         $.ajax({
  21.             type: "get",
  22.             url: "/default1/data",
  23.             dataType: "json",
  24.             success: function (obj) {
  25.                 //obj是字符串，转成json对象需要加"("+obj+")"
  26.                 var o = eval("("+obj+")");
  27.  
  28.                 document.getElementById("result").innerHTML = tmpl('tmp', o);
  29.             }
  30.         });
  31.     }
  32. </script>

　　数据从这里来：

  1.  public JsonResult Data()
  2.         {
  3.             var json = "{'name':'小明','sex':'男','list':[{'a':'1','b':'2'},{'a':'3','b':'4'}]}";
  4.             return Json(json, JsonRequestBehavior.AllowGet);
  5.         }

　　附带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. 【html5】 解决 video标签 不自动全屏

    <video controls="controls" poster='' src='' preload="auto" x5-playsinline=&qu ...

  2. Qt编写自定义控件6-指南针仪表盘

    前言 指南针仪表盘,主要用来指示东南西北四个方位,双向对称两个指针旋转,其实就是360度打转,功能属于简单型,可能指针的绘制稍微难一点,需要计算多个点构成多边形,本系列控件文章将会连续发100+篇,一 ...

  3. geotrellis使用（四十二）将 Shp 文件转为 GeoJson

    前言 一个多月没有写博客了,今天尝试着动笔写点. 原因很多,最重要的原因是我转行了.是的,我离开了开发岗位,走向了开发的天敌-产品经理.虽然名义上是产品经理,但是干的事情也很杂,除了不写代码,其他的都 ...

  4. vmare 往 virtualbox迁移

    vmare实在太卡了.抓狂. 于是想迁移到virtualbox观察下. 谷歌了下方案,发现众说纷纭. 有操作超级复杂的,比如:http://stackoverflow.com/questions/69 ...

  5. VC++ 字符串Dword、LPSTR、LPWSTR、LPCSTR、LPCWSTR、LPTSTR、LPCTSTR

            类   型     MBCS  UNICODE TCHAR char char WCHAR wchar_t wchar_t LPSTR char* char* LPCSTR const ...

  6. react+mobx 编写 Async装饰器

    使用 // indexStore.js import axios from "axios"; import { from } from "rxjs"; impo ...

  7. mobx 添加 isEmpty 装饰器

    避免 obj.xxx && obj.xxx.length 这样的写法 store import * as u from "lodash"; function isE ...

  8. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  9. js运用5

    js数据类型具体分析 1.基础类型:string   number boolean null undefined 2.引用类型:object==>        json    array    ...

  10. 序列&权限&索引&视图的语句

    create sequence 订单_订单编号_seq -- 创建序列 (成功后在sequence中查询) increment by start with maxvalue nocycle nocac ...