HandleBar模板＆amp; jQuery mobile＆amp;动态列表视图

Question

我正在使用jQuery，jQuery Mobile，Handlebar来完成这个项目

我有一个课程页面如下。

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

以上课程取自我使用Handlebar的JSON。以下是Handlebar模板。

<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');
}

取自文档。

  

如果您将项目添加到列表视图，则需要调用   在它上面刷新（）方法来更新样式并创建任何嵌套   添加的列表。例如：

     。

$（ '＃MYLIST'）列表视图（ '刷新'）;

     

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

更新

Gajotres answer on some other similar question