动态列表视图在刷新之前不会加载

Question

我正在使用 JS 渲染在 Jquery Mobile 中为我的 Phonegap 应用程序创建动态页面。然而，问题是在页面刷新之前不会加载列表视图。显然这不是我想要的，在另一个应用程序中我使用了完全相同的技术，并且列表视图会立即加载。问题是两者之间没有区别，所以我不知道为什么它在这个中不起作用。

这是我加载页面的脚本：

<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 中，它们在那里等待其他内容。加载第二个页面时，只有其 BODY 内容会加载到 DOM 中。更准确地说，即使 BODY 也没有完全加载。只有属性 data-role="page" 的第一个 div 将被加载，其他所有内容都将被丢弃。即使您在 BODY 中有更多页面，也只会加载第一个页面。此规则仅适用于后续页面，如果您在初始 HTML 中有更多页面，所有这些页面都将被加载。

这就是为什么您的列表视图只有在页面刷新后才能成功显示。

这是官方文档：http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

不幸的是，您不会在他们的文档中找到此描述。以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述这个。 （jQuery Mobile 文档很大，但缺少很多东西）。

我有另一个 ANSWER 讨论这个问题。可以在此处找到解决方案和工作示例。