A-A+

JSRender

2014年12月25日 技术 暂无评论 阅读 3,197 次

jsrender 是下一代的 jQuery 模板,专为高性能的纯字符串渲染而优化,无需 DOM 和其他 jQuery 依赖。其官方地址为：http://www.jsviews.com/。

应用实例1：table动态加载

HTML：

  1. <table class="table table-bordered">
  2.     <thead>
  3.         <tr>
  4.             <th>姓名</th>
  5.             <th>用户名</th>
  6.         </tr>
  7.     </thead>
  8.     <tbody id="data-content">
  9.     </tbody>
  10. </table>

首先需要引用jsrender：

  1. <script type="text/javascript" src="/js/jsrender.js" charset="UTF-8"></script>

模板声明：

  1. <!--数据模板开始-->
  2. <script id="DataTemplate" type="text/x-jsrender">
  3.     {{for UserList}}
  4.         <tr>
  5.             <td>{{:DisplayName}}</td>
  6.             <td class="center">{{:Name}}</td>
  7.             </td>
  8.         </tr>
  9.     {{/for}}
  10. </script>
  11. <!--数据模板结束-->

内容数据格式：

  1. {"UserList" : [
  2.   {
  3.     "Name": "Pete",
  4.     "DisplayName": "Pete"
  5.   },
  6.   {
  7.     "Name": "test",
  8.     "DisplayName": "test"
  9.   }
  10. ]}

使用模板填充内容：

  1. $.ajax({
  2.     url: '/User/SearchUser.ashx',
  3.     type: 'POST',
  4.     dataType: 'json',
  5.     data: data,
  6.     timeout: 60000,
  7.     error: function (XMLHttpRequest, textStatus, errorThrown) {//请求错误 时执行的方法
  8.         $("#data-content").html("error!" + errorThrown);
  9.     },
  10.     success: function (result) {//请求成功时执行的方法(DataTemplate:模板名称,result:数据)
  11.         $("#data-content").html($("#DataTemplate").render(result));
  12.     }
  13. })
标签：

给我留言

Copyright © 字痕随行 保留所有权利.   Theme  Ality

用户登录

分享到：