Jquery mobile listview autodividersSelector

Question

我一直在网络上（和这里）搜索，但似乎无法弄清楚发生了什么。我有一个 jquery mobile (1.2) 页面，列表视图上有几个项目。我为每个 [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. 仍然需要在您的<ul> 上使用data-autodividers="true"
2. 将代码放入适当的jQM处理程序pageinit()或pagebeforeshow()
3. var out = li.attr('time');] 有错别字

话虽如此，您的列表视图的标记将如下所示：

<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