首页 > 编程语言 > 详细

javascript Template tmpl

时间:2017-11-26 18:36:35      阅读:240      评论:0      收藏:0      [点我收藏+]

前两天写前端遇到很多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

原文:http://www.cnblogs.com/tony-brook/p/7899624.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!