网页页面模板引擎Art-Template 使用

是JS模板引擎基于模板，高效的生成复杂HTML片段

<script type="text/html" id="tpl">
    <a href="/book/{{bookId}}" style="color: inherit">
        <div class="row mt-2 book">
            <div class="col-4 mb-2 pr-2">
                <img class="img-fluid" src="{{cover}}">
            </div>
            <div class="col-8  mb-2 pl-0">
                <h5 class="text-truncate">{{bookName}}</h5>

                <div class="mb-2 bg-light small  p-2 w-100 text-truncate">{{author}}</div>


                <div class="mb-2 w-100">{{subTitle}}</div>

                <p>
                     <span class="stars" data-score="{{evaluationScore}}" title="gorgeous"></span>
                    <span class="mt-2 ml-2">{{evaluationScore}}</span>
                    <span class="mt-2 ml-2">{{evaluationQuantity}}</span>
                </p>
            </div>
        </div>
    </a>
    <hr>
</script>

$.ajax({
    url: "/books",
    data: {p: 1},
    type: "get",
    dataType: "json",
    success: function (json) {
        console.info(json);
        var records = json.records;
        $.each(records, function (index, book) {
        //视图模板绑定数据
            var html = template("tpl", book)
            $("#bookList").append(html)
        });

        $(".stars").raty({readOnly:true})
    }
})

Art-Template 腾讯开源，JS模板引擎基于模板，高效的生成复杂HTML片段 · MingCaiXiong/spring-learn@6d7bea2