为自动分隔符设置自定义属性

Question

我正在尝试划分一个在 jQuery-mobile 中动态填充的 ListView。我正在设置一些带有属性status="true" 和一些status="false" 的列表项，想知道是否可以自动将它们分成两组（已下载/未下载）？

这是我的 HTML：

<div role="main" class="ui-content jqm-content">
    <div>
        <ul id="linkList" data-role="listview" data-autodividers="true">
        </ul>
    </div>
</div>

我的 JS：

var $li;
var $status = 'false';

window.resolveLocalFileSystemURL(fileSource + val.title + ".pdf", success, fail);

// if file exists
function success() {
    $li.find("a").on("click", function(){ openPdf(val.title); });
    $status = 'true';
}

// if file doesnt exists
function fail() {
    $li.find("a").on("click", function(){ downloadPdf(val.title,val.url); });
    $status = 'false';
}

$li = $("<li><a href='#' status=''+status+''>"+val.title+"</a></li>");

$("#linkList").append($li).listview('refresh');
$("#linkList").listview({
    autodividers: true,
    autodividersSelector: function (li) {
    var out = li.attr('status');
    return out;
    }
}).listview('refresh');

那么，是否可以自动执行此操作，或者我必须按代码进行排序，并添加分隔符。代码本身并没有添加任何分隔符。

Answer 1

首先，自动分隔符仅在您的列表已按状态排序时才有效。因此，您需要在将其添加到 UL 之前对其进行排序。

接下来，对于状态，您可以使用 LI 上的数据属性或 li 内的锚点：

'<li ><a href="#" data-status="' + item.status +'">' + item.val + '</a></li>'

然后在添加项目时，设置 autodividersSelector 以检索锚点上的数据属性：

$('#linkList')
    .empty()
    .append(allfiles)
    .listview({
        autodividers:true,
        autodividersSelector: function ( li ) {
            var out = li.find('a').data("status");
            return out;
        }
    })
    .listview("refresh");

工作DEMO