javascript - 不使用jQuery Mobile和Cordova刷新可折叠 ListView 的标题

我正在使用Cordova和JQuery Mobile 1.4.3构建一个从Web服务提取数据的应用程序。科尔多瓦加载并更新DOM后，我就没有问题可以获取数据。

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

但是，一旦DOM更新完成，可折叠的标题就不会在内容更新时刷新其样式。此外，标题也保持可单击状态。

我在网上搜寻解决方案，但找不到找到可折叠标题的方法来刷新其视图。

我尝试使用$("#id").collapsible('refresh')无济于事。

关于如何更新UI的任何帮助都将非常有用

下面的代码。

index.html的标题脚本

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

标记片段

<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;
}

最佳答案

首先，您需要了解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>

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

编辑：我忘了提到您不需要调用刷新方法，因为您不需要替换可折叠的任何部分。

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

关于javascript - 不使用jQuery Mobile和Cordova刷新可折叠 ListView 的标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25335099/