javascript - 关于handlebar.js动态创建模板的疑问

问题描述

问 题

最近试着做一个h5音乐播放器，播放列表在html中是用handlebar进行渲染的，如图

index.html:

    <ul class="m-songlist" id="songlist" style="float: left">
        <script id="sListTpl" type="text/x-handlebars-template">
        {{#each this}}
        {{#isInitData this @index}}
        <li class="song btm-line" data-src={{songSrc}} data-index={{id}}>
                <div class="poster">
                        <img src={{poster.thumbnail}}>
                </div>
                <div class="songinfo">
                        <h2 class="lsongname">{{songName}}</h2>
                        <sub class="lsinger">{{singer}}</sub>
                </div>
                <div class="loveflag">
                        <i class="icon icon-love {{#if loveFlag}}active{{/if}}"></i>
                </div>
        </li>
        {{/isInitData}}
        {{/each}}
        </script>
    </ul>

js:

var sListTpl = $("#sListTpl").html();
preTpl = Handlebars.compile(sListTpl);
$(container).html(preTpl(data));

但是由于音乐列表后面的数据是滚动才加载的，据我所知在html中创建的handlerbarjs在页面初始化的时候就会将这些模板进行编译了，我想问在js中能否创建一个handlebar的模板供我追加列表项目使用？

目前js中动态加载部分还是用老式的拼接字符串的做法，个人觉得这样就不统一了，而且代码杂糅造成可读性不高。

            $.each(data, function(index, el) {
                if (index >= songIndex && index < songIndex + Settings.reqNum) {
                    tpl += "<li class='song btm-line' data-src='res/music/" + songNum + ".mp3' data-index='" + songNum + "'><div class='poster'><img src='./img/poster/" + songNum + "-thumbnail.jpg'></div><div class='songinfo'><h2 class='lsongname'>" + el.songName + "</h2><sub class='lsinger'>" + el.singer + "</sub></div><div class='loveflag'><i class='icon icon-love '></i></div></li>";
                    songNum++;
                }
            });
            $(container).append($(tpl));

解决方案

关键是你把 handlebar 作为服务器端渲染的模板还是客户端的模板（估计一般没人用作客户端的模板吧），你的问题应该也是在 handlebar 作为服务器端渲染模板时候才会遇到。

那么，handlerbar 在作为服务端渲染的情况下，一旦页面生成，它在这个页面上的生命周期就已经结束了。所以，你在客户端所做的任何改变都跟 handlebar 没有关系了。这个时候你想根据 ajax 取得的数据改变这个列表，可以用 jQuery 或者原生的 DOM 操作来实现，也可以使用客户端模板，也就是常说的 MVVM 这之类的东西，比如 Angular 啊，React 啊，VUE 啊……当然你用客户端模板的时候要考虑它和服务端模板的语法冲突。

当然还有一个比较原始的解法就是不用 Ajax，采用提交参数刷新页面的方法……估计这个方法是你不想要的。

这篇关于javascript - 关于handlebar.js动态创建模板的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！