为什么渲染的时候,明明ajax请求没问题,模板引擎也没问题,却没有呢(layui加template)
作者:互联网
这是因为layui的渲染机制造成的,你在加载的时候是空的,然后你模板获取到之后,已经渲染结束了,所以啥也没有,这个时候我们需要重新渲染一下
//初始化文章分类 function initCate() { $.ajax({ method: 'GET', url: '/my/article/cates', success: function (res) { if (res.status !== 0) { return layer.msg('获取分类数据失败!') } // 调用模板引擎渲染分类的可选项 var htmlStr = template('tpl-cate', res); console.log(htmlStr); $('[name=cate_id]').html(htmlStr); //为什么没有渲染上去???? //这是因为layui的渲染机制造成的 form.render(); } }) }
模板和html代码
<form class="layui-form" id="form-search"> <div class="layui-form-item layui-inline"> <select name="cate_id"></select> </div> <div class="layui-form-item layui-inline"> <select name="state"> <option value="">所有状态</option> <option value="已发布">已发布</option> <option value="草稿">草稿</option> </select> </div> <div class="layui-form-item layui-inline"> <button class="layui-btn" lay-submit lay-filter="formDemo">筛选</button> </div> </form> <script type="text/html" id="tpl-table"> {{each data}} <tr> <td>{{$value.title}}</td> <td>{{$value.cate_name}}</td> <td>{{$value.pub_date|dataFormat}}</td> <td>{{$value.state}}</td> <td> <button type="button" class="layui-btn">编辑</button> <button type="button" class="layui-btn">删除</button> </td> </tr> {{/each}} </script> <!-- 分类可选项的模板结构 --> <script type="text/html" id="tpl-cate"> <option value="">所有分类</option> {{each data}} <option value="{{$value.Id}}">{{$value.name}}</option> {{/each}} </script>
标签:res,cate,渲染,layui,value,ajax,template,each,模板 来源: https://www.cnblogs.com/alwaysrun/p/16612396.html