A-A+
JSRender
jsrender 是下一代的 jQuery 模板,专为高性能的纯字符串渲染而优化,无需 DOM 和其他 jQuery 依赖。其官方地址为:http://www.jsviews.com/。
应用实例1:table动态加载
HTML:
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>姓名</th>
- <th>用户名</th>
- </tr>
- </thead>
- <tbody id="data-content">
- </tbody>
- </table>
首先需要引用jsrender:
- <script type="text/javascript" src="/js/jsrender.js" charset="UTF-8"></script>
模板声明:
- <!--数据模板开始-->
- <script id="DataTemplate" type="text/x-jsrender">
- {{for UserList}}
- <tr>
- <td>{{:DisplayName}}</td>
- <td class="center">{{:Name}}</td>
- </td>
- </tr>
- {{/for}}
- </script>
- <!--数据模板结束-->
内容数据格式:
- {"UserList" : [
- {
- "Name": "Pete",
- "DisplayName": "Pete"
- },
- {
- "Name": "test",
- "DisplayName": "test"
- }
- ]}
使用模板填充内容:
- $.ajax({
- url: '/User/SearchUser.ashx',
- type: 'POST',
- dataType: 'json',
- data: data,
- timeout: 60000,
- error: function (XMLHttpRequest, textStatus, errorThrown) {//请求错误 时执行的方法
- $("#data-content").html("error!" + errorThrown);
- },
- success: function (result) {//请求成功时执行的方法(DataTemplate:模板名称,result:数据)
- $("#data-content").html($("#DataTemplate").render(result));
- }
- })