Jquery移动 ListView 自动分隔选择器

Question

我一直在整个网络(以及这里)进行搜索，但似乎无法弄清楚发生了什么。我有一个 jquery mobile (1.2) 页面， ListView 上有几个项目。我已经为每个 [li] 标签添加了一个自定义属性，并根据 jquery 移动演示将其设置为自动分隔符。

HTML

<div data-role="page" id="ScheduleDay">
<div data-role="header">
    <a href="#HomePage" data-icon="home" data-direction="reverse">Home</a>      
    <h1 id="ScheduleDayText">Schedule</h1>
</div>
<div data-role="content">   
    <ul data-role="listview" id="ScheduleList">
        <li time="3:30PM"><a href="#">Event 1</a></li>
        <li time="3:30PM"><a href="#">Event 2</a></li>
        <li time="4:30PM"><a href="#">Event 3</a></li>
   </ul>
</div>
</div>

JQUERY

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

我创建了一个jsfiddle展示我正在努力实现的目标。

我似乎无法让分隔线显示出来，而且我确信我忽略了一些相当小的东西(或者完全错过了船 - 我对jquery仍然相当陌生)。

任何帮助将不胜感激。

Answer 1

要使其正常工作:

1. 仍然需要使用data-autodividers="true"在您的<ul>上
2. 将代码放入适当的 jQM 处理程序 pageinit()或pagebeforeshow()
3. var out = li.attr('time');] 有拼写错误<-- 末尾不需要括号

话虽如此，您的 ListView 的标记将如下所示:

<ul data-role="listview" id="ScheduleList" data-autodividers="true">
</ul>

JS 代码将如下所示:

$(document).on("pageinit", "#ScheduleDay", function(){
    $("#ScheduleList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr("time");
            return out;
        }
    }).listview("refresh");
});

这里是jsFiddle