模板引擎jsrender简单使用

最新推荐文章于 2024-07-23 18:34:58 发布

风风草

最新推荐文章于 2024-07-23 18:34:58 发布

阅读量650

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u011523953/article/details/104551060

版权

前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

1、下载jsrender.js
在这里插入图片描述
2、简单使用

页面上：

 <table>
  <thead>
     <tr>
       <th >序号</th>
       <th>评论</th>
     </tr>
   </thead>
   <tbody>
   <!--模板渲染的位置-->
   </tbody>
 </table>

使用模板引擎

<!-- 引入模板引擎 -->
  <script src="/static/assets/vendors/jsrender/jsrender.js"></script>
<!-- 使用模板引擎 -->
  <script id="comments_tmpl" type="text/x-jsrender">
    {{for comments}}
      <tr>
        <td>{{:#index}}</td>
        <td>{{:content}}</td>
      </tr>
    {{/for}}
  </script>

发送AJAX请求得到数据并渲染到列表上

    $.getJSON('/admin/api/comments.php',{},function(res){
      var html=$('#comments_tmpl').render({
        comments:res
      })
      //将数据渲染到页面上
     $('tbody').html(html)
    })