jquery - HandleBar 模板 & jQuery 移动 & 动态 ListView

Question

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

我有一个类(class)页面，如下所示。

当我单击类(class)时，它会显示如下页面，其中包含类(class)的特定类(class)。

以上类(class)取自 JSON，我为此使用 Handlebar。下面是 Handlebars 模板。

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

            });

        });

然后，如果我转到类(class)页面并单击类(class)，类(class)将无法正确显示。它显示以下输出。

第一次点击 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() 但为什么我第二次没有得到正确的输出？为什么第二次类(class)没有正确显示？

Answer 1

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

你要做的是

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

摘自文档。

If you add items to a listview, you'll need to call therefresh() method on it to update the styles and create any nestedlists that are added. For example:

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

Note that the refresh() method onlyaffects new nodes appended to a list. This is done for performancereasons. Any list items already enhanced will be ignored by therefresh process. This means that if you change the contents orattributes on an already enhanced list item, these won't be reflected.If you want a list item to be updated, replace it with fresh markupbefore calling refresh.

更新

Gajotres answer on some other similar question