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 。可以在那里找到解决方案和工作示例。

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

1 个答案: