javascript - 使用 jquery mobile 和 cordova 无法刷新可折叠 ListView 的标题

Question

我正在使用 Cordova 和 JQuery Mobile 1.4.3 构建一个应用程序，该应用程序从网络服务中提取数据。一旦 cordova 加载并更新 DOM，我就可以毫无问题地获取数据。

数据显示在可折叠列表中，每个标题和 View 根据从 Web 服务返回的数据进行更新。

但是，一旦 DOM 更新完成，可折叠标题不会刷新其样式，而内容会刷新。此外，标题仍然是可点击的。

我在网上寻找解决方案，但找不到一种方法来获取可折叠标题以刷新其 View 。

我尝试使用 $("#id").collapsible('refresh') 但没有成功。

任何有关如何更新用户界面的帮助都会很棒

代码如下。

index.html 的 header 脚本

<script type="text/javascript">
   document.addEventListener("deviceready", onDeviceReady, false);
   function onDeviceReady() {
      init();
   }              
</script>

标记 fragment

<div data-role="page" id="home" data-title="Home">
    <div data-role="header" data-id="foo" data-position="fixed">
        <h1>Title</h1>
        <a href="#menu" data-icon="bars" data-iconpos="notext" data-transition="slide" data-corners="false" data-shadow="false" class="ui-btn-right"></a>
    </div>

    <div data-role="content" id="collapsible_set">
        <h3 id="date"></h3>
        <div data-role="collapsibleset" id="datacollapsible" data-inset="false">

            <!-- First Collapsible -->
            <div data-role="collapsible" id="test" class="content">
                <h3 class="title"></h3>
                <ul data-role="listview" data-inset="false">
                    <li style="font-size: 1.4em;">
                        <p class="description" style="overflow: visible; text-overflow: clip; white-space: normal"></p>
                        <p>Source:</p>
                        <p><a href="" target="_blank" class="source"></a></p>
                        <div data-role="controlgroup">
                            <a href="#" data-role="button" data-icon="star">Add to Favorites</a>
                            <a href="#" data-role="button">Share</a>
                        </div>
                    </li>
                </ul>
            </div>
           <!-- More Collapsibles below -->

         </div>
 </div>

JS

var data;
var pattern = new RegExp('^http');


function init() {

    initializeDataSet();
    insertData();
    $("#test").collapsible('refresh');

}

function insertData() {        

    // set date
    var date = new Date();
    var options = {
        weekday: "long", year: "numeric", month: "long", day: "numeric"};

    var outputDate = date.toLocaleString("en-us", options);
    $("#date").html("" + outputDate);

    // Get content elements and add data
    var content = $('.content');

    if (content) {
        for (var i = 0; i < content.length; i++) {
            var temp = content[i];

            temp.getElementsByTagName('h3')[0].innerHTML = data[i]['title'];
            if(data[i]['word']){
                temp.getElementsByTagName('p')[0].innerHTML = data[i]['word'] + ": " + data[i]['description'];
            } else {
                temp.getElementsByTagName('p')[0].innerHTML = data[i]['description'];                    
            }
            if(pattern.test(data[i]['source'])) {
                temp.getElementsByTagName('a')[0].setAttribute("href", data[i]['source']);
                temp.getElementsByTagName('a')[0].setAttribute("target", "_blank");
            } else {
                temp.getElementsByTagName('a')[0].removeAttribute("href");
                temp.getElementsByTagName('a')[0].removeAttribute("target");
            }
            temp.getElementsByTagName('a')[0].innerHTML = data[i]['source'];
        }
    }

}

/**
 * initialise the dataset to a global variable when the app launches.
 * @returns {undefined}
 */
function initializeDataSet() {
    // make request to get data
    var request = createRequest();
    if (request === null) {
        alert("Error, can't get data");
        return;
    }

    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                data = JSON.parse(request.responseText);
            }
        }
    };

    var params = "date=" + createDate();
    request.open("POST", "URL FROM WHERE I AM GETTING DATA", false);
    //Send the proper header information along with the request
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);

}

function createDate() {

    var date = new Date();
    var day = date.getDate();
    if (day < 10) {
        day = "0" + day.toString();
    }
    var month = date.getMonth() + 1;
    if (month < 10) {
        month = "0" + month.toString();
    }
    return date.getFullYear() + "-" + month + "-" + day; 
}

Answer 1

首先，您需要了解 jQM 如何增强其小部件，例如可折叠。创建小部件后，可折叠的初始 HTML 标记不会保持原样。

<div data-role="collapsible">
   <h3>Header</h3>
   <p>Contents</p>
</div>

上面的 HTML 标记转换为以下内容。

<div data-role="collapsible" class="ui-collapsible ui-collapsible-themed-content">
   <!-- Header -->
   <h3 class="ui-collapsible-heading">
      <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-btn-inherit ui-icon-minus">
         Header
      </a>
   </h3>
   <!-- Contents -->
   <div class="ui-collapsible-content ui-body-inherit" aria-hidden="false">           
      <p>Contents</p>
   </div>
</div>

您没有正确更新collapsible的标题/内容，您需要定位内部元素。下面是一个例子。

编辑:我忘了提及您不需要调用刷新方法，因为您没有替换可折叠的任何部分>.

var data = [{
    "title": "foo1",
        "content": "foo1 content"
}, {
    "title": "foo2",
        "content": "foo2 content"
}];

$.each(data, function (i, value) {
    $("#datacollapsible .ui-collapsible:eq(" + i + ")")
        .find("h3 a")
        .text(value.title)
        .end()
        .find(".ui-collapsible-content p")
        .text(value.content);
});

Demo