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

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

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

01.
<div class="layui-warp">
02.
    <div class="layui-form">
03.
        <div class="layui-inline" style="width: 300px;">
04.
            <input type="text" class="layui-input" name="time_period" id="time_period" autocomplete="off" placeholder="选择要查询的时间范围">
05.
        </div>
06.
        <button class="layui-btn" lay-submit lay-filter="retrive_btn">检索</button>
07.
    </div>
08.
    <div class="layui-alert-box" style="margin-top:10px;">
09.
        <div class="layui-row layui-col-space1">
10.
            <div id="view" style="background: #FFF;padding: 0 5px;"></div>
11.
        </div>
12.
    </div>
13.
</div>
14.
<script id="show" type="text/html">
15.
<div class="layui-col-md3" id="layui-slidebar">
16.
<%#  layui.each(d.data, function(index, item){ %>
17.
    <div class="layui-row <%# if(index==0){  %> layui-checked<%# } %>" data-index="<% index %>" data-track=<% JSON.stringify(item) %>>
18.
        <div class="layui-col-md4"></div>
19.
        <div class="layui-col-md8">
20.
            <p class="layui-text" style="font-size: 12px;"><% item[0].name %></p>
21.
            <p class="layui-text" style="font-size: 12px;"><% getTimeStr(item[0].timestamp) %></p>
22.
        </div>
23.
    </div>
24.
<%#  }); %>
25.
</div>
26.
<div class="layui-col-md9">
27.
    <div class="layui-row"></div>
28.
</div>
29.
</script>

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

01.
{% include 'public/header.html' %}
02.
<div class="layui-warp">
03.
    <div class="layui-form">
04.
        <div class="layui-inline" style="width: 300px;">
05.
            <input type="text" class="layui-input" name="time_period" id="time_period" autocomplete="off" placeholder="选择要查询的时间范围">
06.
        </div>
07.
        <button class="layui-btn" lay-submit lay-filter="retrive_btn">检索</button>
08.
    </div>
09.
    <div class="layui-alert-box" style="margin-top:10px;">
10.
        <div class="layui-row layui-col-space1" style="background: #FFF;padding-bottom:10px;">
11.
            <div class="layui-col-md3" id="layui-slidebar"></div>
12.
            <div class="layui-col-md9" style="padding: 0 5px;">
13.
                <div class="layui-row">
14.
                    <div class="layui-track-scene"></div>
15.
                </div>
16.
            </div>
17.
        </div>
18.
    </div>
19.
</div>
20.
<script id="show" type="text/html">
21.
<%#  layui.each(d.data, function(index, item){ %>
22.
<div class="layui-row <%# if(index==0){  %> layui-checked<%# } %> layui-track-list" data-index="<% index %>" style="margin-top:5px;">
23.
    <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>
24.
    <div class="layui-col-md9">
25.
        <p class="layui-text" style="font-size: 10px;line-height:18px;"><% item[0].name %></p>
26.
        <p class="layui-text" style="font-size: 10px;line-height:18px;"><% getTimeStr(item[0].timestamp) %></p>
27.
    </div>
28.
</div>
29.
<%#  }); %>
30.
</script>

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