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

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

index.html:

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 += "
" + el.songName + "
" + el.singer + "
";
                    songNum++;
                }
            });
            $(container).append($(tpl));