jQuery mobile 无法正确自动分割数据答案

【问题标题】：jQuery mobile can't properly autodivide datajQuery mobile 无法正确自动分割数据
【发布时间】：2013-06-25 12:22:56
【问题描述】：

我正在尝试使用 PhoneGap 和 jQuery mobile 创建一个 IOS 应用程序。目标是从 Web 服务接收新闻数据 (json) 并显示它。除了jquery mobile的autodivider功能外，其他都可以。

JS：

<script>
$(document).on("pageinit", "#news", function(){
    $("#newsContainer ul").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr("category");
            return out;
        }
    }).listview("refresh");

    getNews(15);

    function getNews(count){
        $.ajax({
            url: '*someURL*/file.php?count='+count,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){

                    $.each(data, function(i,item){ 
                        $('#newsContainer ul').append('<li category="'+item.category+'"><a>'+item.image+'<div style="float:left;white-space:normal;">'+item.headline+'</div><div style="float:left">'+item.content+'</div></div style="clear:both"></div></a></li>').listview('refresh');
                    });

                $('#newsContainer ul').listview('refresh');

            },
            error: function(){
                console.log('Fehler bei JSON Verarbeitung');
                $('#newsContainer ul').append('<li>Es ist ein Fehler beim Laden der News aufgetreten</li>').listview('refresh');
            }
        });

    }

});
</script>

HTML：

<div data-role="page" id="news">
    <div data-role="header">
        <h1>News</h1> 
    </div>

    <div data-role="content" id="newsContainer">
        <ul data-role="listview" data-corners="false" data-inset="false" data-theme="a" data-dividertheme="a" data-filter="true" data-sort="true" data-autodividers="true">
        </ul>
    </div>

    <div data-role="footer" class="ui-bar ui-block-a" data-position="fixed" data-id="myFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="#news" data-iconpos="top" data-icon="home">News </a> </li>
                <li><a href="#site2" data-iconpos="top" data-icon="home">Seite2 </a> </li>
            </ul>
        </div>
    </div>
</div>

不幸的是，它不会将所有相等的值合并在一起。我附上了一张图片以更好地展示这个问题。

【问题讨论】：

首先，为什么要使用pageinit和ready？ ready 不应该与 jQuery Mobile 一起使用。删除ready 并使用正确的jQuery Mobile events。并在完成附加项目后刷新列表视图（一旦循环结束）。 $('#newsContainer').listview('refresh');
我不知道特殊的 jQuery 移动事件。我现在在pageinit 中插入了所有内容，并在循环之后立即添加了刷新，但它没有改变任何东西......
把pageinit换成pagebeforeshow，试试看。在这里$("#newsContainer ul").listview({ 删除ul
那也行不通。
代码中的第三行 $("#newsContainer ul").listview({ 删除 ul。

标签： jquery jquery-mobile cordova jquery-mobile-listview

【解决方案1】：

我想出了这个链接：

http://forum.jquery.com/topic/autodivider-features-group-count

替换代码确实对我有用。

好像 jquery mobile 不支持对具有相同值的项目进行分组。

【讨论】：

【解决方案2】：

我知道这个问题很老，但由于没有人提供足够的解决方案 - 这是我的尝试。

listview 小部件不会为您对 li 元素进行排序，您需要自己进行。

您可以使用 tsort-plugin 轻松做到这一点：http://tinysort.sjeiti.com/

var thisView = $('.listview');
$('li',thisView).tsort();
thisView.listview().listview('refresh');

【讨论】：