09.ajax局部渲染---《Beetl視訊課程》

本期視訊實作分類實時擷取；

内容簡介：使用了局部渲染技術，實作分類的實時擷取

一起學beetl目錄：

https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598 作者：GK

Beetl滿足了更加流行的方式，研發了ajax局部渲染技術。

背景處理後傳回一個json，浏覽器端将json資料拆開，拼成一條一條的行資料，然後生成dom節點，追加到表格裡。 作為另外一種可選技術，beetl支援局部渲染技術，允許背景處理傳回的是一個完成的html片段，這樣，前端浏覽器可以直接将這個html片段追加到表格裡。在性能測試裡，倆種方式性能差别不大(

http://bbs.ibeetl.com/ajax//)

在beetl模闆中，使用

#ajax 局部命名:{ .... }

包裹起來的代碼，就是ajax需要渲染的局部代碼。

如果一個模闆傳回正常的渲染整個模闆檔案，将會忽略這一标記，比如：

return "index.html"

如果傳回的是 模闆名稱#局部命名，Beetl将會隻渲染這一小段的代碼。比如

return "index.html#局部命名"

舉個例子，在項目中

layout.html

模闆中，增加了一段ajax标記

<div class="widewrapper main">
    <div class="container">
        <div class="row">
            <div class="col-md-8 blog-main">
                ${layoutContent}
            </div>
            <%if(isEmpty(notShow)){%>
            <aside class="col-md-4 blog-aside" id="tagsDiv">
                <%#ajax tags :{%>
                <div class="aside-widget">
                    <header>
                        <h3>Tags</h3>
                    </header>
                    <div class="body clearfix">
                        <ul class="tags">
                            <%for(tag in categorys!){%>
                            <li><a href="/?category=${tag}">${tag}</a></li>
                            <%}%>
                        </ul>
                    </div>
                </div>
                <%} }%>
            </aside>
        </div>
    </div>
</div>           

大家可以看到有一段使用

#ajax tags{}

包裹起來的代碼

<%#ajax tags :{%>
    .....
<%}%>           

當controller中直接

return "layout.html"

時，将會渲染整個頁面。

我們在controller中增加一個方法。

@GetMapping("/tags")
    public String tags(HttpServletRequest request) {
        request.setAttribute("categorys", blogService.listCategory());
        return "common/layout.html#tags";
    }           

告訴beetl模闆引擎，隻渲染tags中間的代碼。

可以看到我們渲染的代碼為：

<div class="aside-widget">
    <header>
        <h3>Tags</h3>
    </header>
    <div class="body clearfix">
        <ul class="tags">
            <li><a href="/?category=beetl">beetl</a></li>
            <li><a href="/?category=beetlsql">beetlsql</a></li>
            <li><a href="/?category=java">java</a></li>
            <li><a href="/?category=一起學Beetl">一起學Beetl</a></li>
        </ul>
    </div>
</div>           

僅僅渲染了我們中間這一段代碼，能讓我們更加優雅使用。

我們在前端隻要使用js加入這段渲染的html代碼即可。

<script type="text/javascript">
    $(function(){
        $.get("${ctxPath}/tags",function (data) {
            $("#tagsDiv").html(data);
            console.info(data);
        });
    });
</script>           

項目git位址：

https://gitee.com/gavink/beetl-blog

視訊位址：下載下傳下來會更清晰，視訊比較長，可使用倍速看

百度網盤下載下傳:

https://pan.baidu.com/s/1LyxAxlKpVXgVjwSXIbzBuA

提取碼: 68im

線上播放位址：bilibili (可以調節清晰度):

https://www.bilibili.com/video/av36278644/?p=9

部落格目錄：