動態列表視圖不會加載，直到刷新

Question

我正在使用JS渲染來爲我的Phonegap應用程序在Jquery Mobile中創建動態頁面。然而，問題是在刷新頁面之前不會加載列表視圖。很明顯，這不是我想要的，在另一個應用程序中，我使用了完全相同的技術，並且立即加載列表視圖。事情是兩者之間沒有區別，所以我不知道爲什麼它不在這一個工作。

這裏是我的腳本加載網頁：

<script src="jquery/jsrender.min.js"></script> 
<script type="text/javascript"> 
$(document).on('pageinit', '#kunstwerken_exp1', function (event, ui) { 
    var $page = $(event.target); 
    $.ajax({ 
     dataType:"json", 
     url:"json/exp1_index.js", 
     success:function(data, textStatus, jqHXR){ 
      for(var x = 0; x < data.length; x++){ 
       //create valid unique IDs for each page. 
       data[x].id = data[x].link.replace("?","").replace("=","").replace("#",""); 
      } 
      console.log("success:"); 
      console.log(data); 
      $("#templateDropPoint").html($("#template").render(data)); 
      $("#templateDropPoint").listview("refresh"); 
      $("body").append($("#pagetemplate").render(data)); 

     }, 
     error:function(jqXHR, textStatus, errorThrown){ 
      console.log(textStatus+ " "+ errorThrown); 
     } 
    }); 

}); 
</script> 

這是HTML：

<div data-role="page" id="kunstwerken_exp1" data-url="kunstwerken_exp1"> 
<div data-role="content"> 
    <ul data-role="listview" id="templateDropPoint"></ul> 
</div><!-- /content --> 
</div> 

<script id="template" type="text/x-jsrender"> 
<li> 
<a href="#{{>id}}"> 
    <img src={{>img}} /> 
    <h5><b>{{>naam}}</b></h5> 
    <h6>{{>kunstwerk}}</h6> 
</a> 
</li> 
</script> 

<script type="text/x-jsrender" id="pagetemplate"> 
<div data-role="page" id="{{>id}}"> 
    {{if pagina}} 
    <div data-role="content"> 
     <h1>{{>naam}} ({{:pagina.nationaliteit}})</h1> 
     <h2>{{:pagina.kunstwerk}}</h2> 
     <em>{{:pagina.onderschrift}}</em> 

     <div class="ui-grid-a my-breakpoint"> 
      <div class="ui-block-a"> 
      <div class="koloma"> 
       <div class="callbacks_container"> 
       <ul class="rslides"> 
        <li id="callbacks1_s0"> 
        <img src="{{:pagina.afbeelding1}}" alt=""><p class="caption">{{:pagina.onderschrift1}}</p> 
        </li> 
       </ul> 
       </div> 
       {{if pagina.videooff}} 
       <ul class="tabs"> 
        <li><a href="#" onclick="clickKunstenaar0();"><img src="images/video.png"/></a></li><br> 
       </ul> 
       {{/if}} 
      </div> 
      </div> 

     <div class="ui-block-b"> 
     <div class="kolomb">{{:pagina.tekst}}</div> 
     </div> 
     </div> 

    </div> 
    {{/if}} 
</div> 
</script> 

Answer 1

要理解這種情況下，你需要了解jQuery Mobile的是如何工作的。它使用AJAX加載其他頁面。

第一頁正常加載。它HEAD和BODY裝入DOM，和他們在那裏等待其他內容。當第二頁被加載時，只有其內容被加載到DOM。更確切地說，即使沒有完全加載BODY。只有屬性爲data-role =「page」的第一個div纔會被加載，其他所有內容都將被丟棄。即使您在BODY內有更多頁面，也只有第一個頁面將被加載。此規則僅適用於後續頁面，如果您在初始HTML中包含更多頁面，則所有這些頁面都將被加載。

這就是爲什麼只有刷新頁面後才能成功顯示listview的原因。

這裏有一個官方文檔：http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

可惜你不會找到自己的文檔描述，在此。以太他們認爲這是一種常識，或者他們忘記像我的其他話題一樣描述這一點。 （jQuery Mobile文檔很大，但缺少很多東西）。

我有另一個ANSWER討論這個問題。解決方案和工作示例可以在那裏找到。