jquery - HandleBar 模板 & jQuery mobile & 动态列表视图

Question

我正在为这个项目使用 jQuery、jQuery Mobile、Handlebar

我有一个课程页面如下。

当我单击一门课程时，它会显示如下页面，其中包含课程的特定课程。

以上课程取自我为此使用 Handlebar 的 JSON。下面是把手模板。

<script id="lessontemplate" type="text/x-handlebars-template">
    {{#each this}}
        <li><a href="{{lesson}}">{{lessonname}}</a></li>
    {{/each}}
</script>

下面是替换模板的JS代码

("#mycourses").on('click','.mycourse',function(e){

            e.preventDefault();
            var url = domainURL+'coursedata.php?callback=?';    
            $.getJSON( url, { courseid: $(this).data('courseid') }, function( data ) {

            var tmpl = $('#lessontemplate').html();
            console.log(tmpl);
            $('h1.coursename').html(data.coursename);
            lessontemplate = Handlebars.compile( tmpl );
            console.log(    lessontemplate(data.coursedetails) );
            $('ul#lessons').html( lessontemplate(data.coursedetails) );
            $.mobile.changePage("#coursedetails", {transition: 'slide'}); 

            });

        });

然后，如果我转到课程页面并单击课程，则课程显示不正确。它显示了以下输出。

第一次单击 Console.log() 输出如下

    {{#each this}}
        <li><a href="{{lesson}}">{{lessonname}}</a></li>
    {{/each}}

        <li><a href="1">Lesson Name 1</a></li>

        <li><a href="2">Lesson Name 2</a></li>

        <li><a href="3">Lesson Name 3</a></li>

第二次单击 Console.log() 输出如下

    {{#each this}}
        <li><a href="{{lesson}}">{{lessonname}}</a></li>
    {{/each}}


        <li><a href="1">Lesson Name 1</a></li>

        <li><a href="2">Lesson Name 2</a></li>

        <li><a href="3">Lesson Name 3</a></li>

第一次单击 Console.log() = 第二次单击 Console.log() 但为什么我第二次没有得到正确的输出？为什么没有正确显示第二次课程？

Answer 1

@Gajotres - 感谢您为我指出正确的方向。

你要做的是

if ( $('ul#lessons').hasClass('ui-listview')) 
{
 $('ul#lessons').listview('refresh');
} 
else {
 $('ul#lessons').trigger('create');
}

取自文档。

如果将项目添加到列表视图，则需要对其调用 refresh() 方法来更新样式并创建添加的任何嵌套列表。例如：

$('#mylist').listview('refresh');

请注意，refresh() 方法仅影响附加到列表的新节点。这样做是出于性能原因。刷新过程将忽略任何已增强的列表项。这意味着如果您更改已经增强的列表项的内容或属性，这些将不会被反映。如果要更新列表项，请在调用刷新之前将其替换为新标记。

更新

Gajotres 回答了一些其他类似的问题