使用layui来写前端一般效果功能让工作减轻了不少，但是在实际的开发中还是遇到了一些个问题，今天就遇到一个问题，本博客文只是用来记录和简单分析下这个问题

我在同时使用模板引擎和其他模块遇到了其他模块失效的问题

因为使用模板引擎以后如果将绑定元素的ID放在模板引擎中进行绑定会出现绑定不上的情况，所以我们在需要操作的dom上绑定的ID，这个dom最好写在html中而不是模板引擎中，例如我的代码

<div class="layui-warp">
    <div class="layui-form">
        <div class="layui-inline" style="width: 300px;">
            <input type="text" class="layui-input" name="time_period" id="time_period" autocomplete="off" placeholder="选择要查询的时间范围">
        </div>
        <button class="layui-btn" lay-submit lay-filter="retrive_btn">检索</button>
    </div>
    <div class="layui-alert-box" style="margin-top:10px;">
        <div class="layui-row layui-col-space1">
            <div id="view" style="background: #FFF;padding: 0 5px;"></div>
        </div>
    </div>
</div>
<script id="show" type="text/html">
<div class="layui-col-md3" id="layui-slidebar">
<%#  layui.each(d.data, function(index, item){ %>
    <div class="layui-row <%# if(index==0){  %> layui-checked<%# } %>" data-index="<% index %>" data-track=<% JSON.stringify(item) %>>
        <div class="layui-col-md4"></div>
        <div class="layui-col-md8">
            <p class="layui-text" style="font-size: 12px;"><% item[0].name %></p>
            <p class="layui-text" style="font-size: 12px;"><% getTimeStr(item[0].timestamp) %></p>
        </div>
    </div>
<%#  }); %>
</div>
<div class="layui-col-md9">
    <div class="layui-row"></div>
</div>
</script>

此时使用绑定的id是layui-slidebar流加载无效，通过改造以后就可以使用流加载

{% include 'public/header.html' %}
<div class="layui-warp">
    <div class="layui-form">
        <div class="layui-inline" style="width: 300px;">
            <input type="text" class="layui-input" name="time_period" id="time_period" autocomplete="off" placeholder="选择要查询的时间范围">
        </div>
        <button class="layui-btn" lay-submit lay-filter="retrive_btn">检索</button>
    </div>
    <div class="layui-alert-box" style="margin-top:10px;">
        <div class="layui-row layui-col-space1" style="background: #FFF;padding-bottom:10px;">
            <div class="layui-col-md3" id="layui-slidebar"></div>
            <div class="layui-col-md9" style="padding: 0 5px;">
                <div class="layui-row">
                    <div class="layui-track-scene"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="show" type="text/html">
<%#  layui.each(d.data, function(index, item){ %>
<div class="layui-row <%# if(index==0){  %> layui-checked<%# } %> layui-track-list" data-index="<% index %>" style="margin-top:5px;">
    <div class="layui-col-md3"><img class="layui-track-image" <%# if(index<8) { %>src<%# }else{ %>lay-src<%# } %>="<% d.records[item[0].record_id][0] %>" data-scene="<% d.records[item[0].record_id][1] %>" /></div>
    <div class="layui-col-md9">
        <p class="layui-text" style="font-size: 10px;line-height:18px;"><% item[0].name %></p>
        <p class="layui-text" style="font-size: 10px;line-height:18px;"><% getTimeStr(item[0].timestamp) %></p>
    </div>
</div>
<%#  }); %>
</script>

同时流加载和一些其他的模块没有重新渲染和重新绑定的一些方法，所以我们目前只有通过修改前端代码的写法来临时处理这种问题