Javascript handlebar.js破坏JQuery移动格式？

我在使用Handlebar模板在listview上显示JQuery移动图标按钮时遇到问题：按钮的图标不会显示

一切正常否则，模板会生成列表，但按钮的图标不会显示。按钮在单击时确实可以工作，如果我在标记之间添加了一些字符，它将正确显示并在单击时工作

如果我只是简单地将模板的内容复制/粘贴到HTML文档中，图标显示良好。只有在由模板生成时才会显示

我正在使用jquerymobile1.4.2和handlebars2.0

编辑：JSFiddle在

这是HTML：

<div data-role="content">               
    <ul id="audioList" data-role="listview" data-inset="true" >             
        <!-- audioList-template -->                     
    </ul>               
</div>

---

提前感谢。

工作正常。抱歉，无法从您的评论中获得解决方案。还尝试用下面的代码重新绘制我的JS，但没有效果：

var source=$（“#audioList template”）.html（），template=handlebar.compile（source），html=template（audioList）；$（“#音频列表”）.html（html）；$（“#音频列表”）.listview（）在这里，看起来列表的数据插入样式也没有被应用：很抱歉，在这里，您可以通过将模板的html复制/粘贴到
：按钮使用控制组来查看预期结果
<script id="audioList-template" type="text/x-handlebars-template">
    {{#.}}
    <li class="ui-grid-a" data-id="{{this.id}}">
        <div class="ui-block-a">
            <p>{{this.name}}</p>
        </div>
        <div class="ui-block-b">
            <a href="#" id="btnAddFavorite" data-icon="star" data-role="button" data-inline="true" data-iconpos="notext" ></a>
            <a href="#" id="btnAddToCart" data-icon="plus" data-role="button" data-inline="true" data-iconpos="notext" ></a>
            <a href="#" data-icon="audio" data-role="button" data-inline="true" data-iconpos="notext"></a>                          
        </div>
    </li>
    {{/.}}
</script>

$('#audioList').empty();
var audioListHandler = Handlebars.compile($("#audioList-template").html());
$('#audioList').html(audioListHandler(audioList));         
$('#audioList').listview().listview('refresh');