車把模板和jQuery的移動及動態列表視圖

Question

我使用jQuery，jQuery Mobile的，車把這個項目

我有如下一個課程頁面。

當我點擊一個療程就說明如下頁面包含爲一療程特定的教訓。

以上的經驗是從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'); 
} 

從文檔服用。

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

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

Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.

更新

Gajotres answer on some other similar question