最近试着做一个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" src={{songSrc}} data-index={{id}}>
                <p class="poster">
                        <img src={{poster.thumbnail}}>
                </p>
                <p class="songinfo">
                        <h2 class="lsongname">{{songName}}</h2>
                        <sub class="lsinger">{{singer}}</sub>
                </p>
                <p class="loveflag">
                        <i class="icon icon-love {{#if loveFlag}}active{{/if}}"></i>
                </p>
        </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' src='res/music/" + songNum + ".mp3' data-index='" + songNum + "'><p class='poster'><img src='./img/poster/" + songNum + "-thumbnail.jpg'></p><p class='songinfo'><h2 class='lsongname'>" + el.songName + "</h2><sub class='lsinger'>" + el.singer + "</sub></p><p class='loveflag'><i class='icon icon-love '></i></p></li>";
                    songNum++;
                }
            });
            $(container).append($(tpl));