带有 JSON 和 jQuery Mobile 的多级列表菜单

Question

我尝试达到以下结构

（不同的！）类别列表

• 类别 1
• 2 类
• 类别 n

每个类别都链接到该类别中的帖子。并且帖子链接到内容

• 帖子 1 类别 1 --> 内容帖子 1 类别 1
• 帖子 2 类别 2 --> 内容帖子 2 类别 1

问题：我不知道如何创建指向帖子的不同类别列表。有什么解决办法吗？

这是我的 JSON 示例（来自 wordpress 中的 json api 插件）

{"status": "ok",
"count": 10,
"count_total": 20,
"pages": 2,
"posts": [
    {
        "id": 86,
        "type": "post",
        "slug": "inaktiviert",
        "url": "http://localhost/wordpress/?p=86",
        "status": "publish",
        "title": "Post 1 Cat1",
        "content": "his is content for Post1 Cat 1.",
        "date": "2014-03-04 15:09:51",
        "modified": "2014-03-04 15:09:51",
        "categories": [
            {
                "id": 1,
                "title": "Category 1",
                "description": "",
                "parent": 0,
                "post_count": 4
            }
        ],
    },
    {
        "id": 84,
        "type": "post",
        "slug": "kann-nicht-aktualisiert-werden",
        "url": "http://localhost/wordpress/?p=84",
        "status": "publish",
        "title": "Post 2 Cat1",
        "content": "<p>This is content for Post2 Cat 1.</p>\n",
        "date": "2014-03-04 15:09:25",
        "modified": "2014-03-04 15:09:25",
        "categories": [
            {
                "id": 1,
                "title": "Category 1",
                "description": "",
                "parent": 0,
                "post_count": 4
            }
        ],
    },
        {
            "id": 74,
            "type": "post",
            "slug": "dieses-symbol-zeigt-an",
            "url": "http://localhost/wordpress/?p=74",
            "status": "publish",
            "title": "Post 1 Cat2",
            "content": "This is Content for Post1 Cat 2",
            "date": "2014-03-04 15:06:47",
            "modified": "2014-03-04 15:06:47",
            "categories": [
                {
                    "id": 2,
                    "title": "Category 2",
                    "description": "",
                    "parent": 0,
                    "post_count": 3
                }
            ],
        }
    ]}

这是我的 JS

$(document).on("pagecreate", "#page1", function(){
    var liste = $('#liste');

    var AllListItems = '';
    var AllDynamicPages = '';
    $.each(daten.posts, function(index1, data) {
        var postid = data.id;
        var postTitle = data.title;
        var postContent = data.content;

        for (var i = 0; i< data.categories.length; i++) {

            var catid = data.categories[i].id;     
            var catTitle = data.categories[i].title;            
            AllListItems += '<li><a href="#page' + postid + '">' + postTitle + '</a></li>';    
            AllDynamicPages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + postTitle + '</h1></div><div data-role="content">' + postContent + '</div></div>'
        }        
    });

    liste.empty().append(AllListItems).listview("refresh");
    $("body").append(AllDynamicPages);
});

DEMO

Answer 1

我会这样处理：创建一个可折叠集而不是列表，其中每个子可折叠是一个类别，每个可折叠类别包含一个帖子列表。

这是您更新的FIDDLE

所以顶级 HTML 标记将是一个可折叠的集合：

<div id="thelist" data-role="collapsibleset" data-theme="a" data-content-theme="a">       
</div>  

然后是代码：

var liste = $('#thelist');
var AllDynamicPages = '';
$.each(daten.posts, function(index1, data) {
    var postid = data.id;
    var postTitle = data.title;
    var postContent = data.content;        
    for (var i = 0; i< data.categories.length; i++) {
        var catid = data.categories[i].id;     
        var catTitle = data.categories[i].title;            
        //see if we already have this category, if not create new collapsible
        var $cat = $("#cat" + catid);
        if ($cat.length == 0){
            $cat = $('<div id="cat' + catid + '" data-role="collapsible"><h3>' + catTitle + '</h3><ul data-role="listview"></ul></div>');   
            liste.append($cat);
        }

        //create post link in category collapsible list
        var postlink = '<li><a href="#page' + postid + '">' + postTitle + '</a></li>';
        $cat.find("ul").append(postlink);

        AllDynamicPages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + postTitle + '</h1></div><div data-role="content">' + postContent + '</div></div>'
    }        
});        
liste.enhanceWithin();
$("body").append(AllDynamicPages);

这与您之前的迭代相同，但现在对于每个类别，我们检查该类别是否已经存在可折叠项。如果没有，我们创建一个并将其添加到集合中。然后我们为帖子创建一个链接，并将其添加到可折叠类别中的列表小部件中。

最后我们调用.enhanceWithin() 来应用jQM 样式。

动态页面部分保持不变。