在 jQuery Mobile 中动态构建可折叠数据集的技术是什么答案

【问题标题】：What is the technique to dynamically build out collapsible data sets in jQuery Mobile在 jQuery Mobile 中动态构建可折叠数据集的技术是什么
【发布时间】：2013-01-26 10:54:17
【问题描述】：

我只能假设我正在尝试做的是在使用动态 javascript 应用程序时非常常见的要求。

对于这个特定的示例，我想通过 JSON 请求详细的测试结果。因此，对于某些用户，他们可能已经完成了 20 次测试，其他人可能已经完成了 1 次。一些用户可能在特定测试中做错了 2 个问题，这些问题将被引用，其他用户可能做错了 10 个问题，有些人得到了 0。只有那些错误会显示出来。

因此，换句话说，我为每个请求它的用户请求不同的可折叠数据集布局。

静态代码可能如下所示：

<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
    <div data-role="collapsible">
        <h2>Test Number 2 - 2 out of 5 correct</h2>
        <ul data-role="listview" data-theme="d" data-divider-theme="d">
            <li data-role="list-divider">You did not complete the following:</li>
            <li><h3>A (answer is: X)</h3></li>
            <li><h3>B (answer is: Y)</h3></li>
            <li><h3>C (answer is: Z)</h3></li>
        </ul>
    </div>
    <div data-role="collapsible">
        <h2>Test Number 1 - 4 out of 5 correct</h2>
        <ul data-role="listview" data-theme="d" data-divider-theme="d">
            <li data-role="list-divider">You did not complete the following:</li>
            <li><h3>A (answer is: X)</h3></li>
        </ul>
    </div>
</div>

作为一个对 JavaScript 和 jQuery 比较陌生的人，我仍然掌握了这方面的窍门，我过去曾玩过一些 DOM 操作。只是想知道我想要完成的工作是否有另一个名称，甚至可能是一个库、我可以在 GitHub 上使用的预构建代码等，这些代码可以执行类似的操作，而无需我从头开始构建所有内容。想要以正确的方式做到这一点。

【问题讨论】：

标签： javascript jquery ajax listview jquery-mobile

【解决方案1】：

你不需要一个特殊的框架，你需要的一切都已经是 jQuery 的一部分了。

我为你创建了一个例子：http://jsfiddle.net/Gajotres/HBxTs/

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-role="content">
            <div data-role="collapsible-set" data-theme="b" data-content-theme="d">
                <div data-role="collapsible">
                    <h2>Simple list</h2>
                    <ul data-role="listview" data-inset="true" id="movie-data" data-theme="a">

                    </ul>
                </div>
            </div>            
        </div>
    </div>
</body>
</html>

JS：

$('#index').live('pagebeforeshow',function(e,data){ 
    $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
        dataType: "jsonp",
        jsonpCallback: 'successCallback',
        async: true,
        beforeSend: function() {
            $.mobile.showPageLoadingMsg(true);
        },
        complete: function() {
            $.mobile.hidePageLoadingMsg();
        },
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});


var ajax = {  
    parseJSONP:function(result){
        //var jsonObj = jQuery.parseJSON(parameters);
        $('#movie-data').append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
        $('#movie-data').append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
        $('#movie-data').append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
        $('#movie-data').append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
        $('#movie-data').append('<li>Released:<span> ' + result[0].released+ '</span></li>');  
        $('#movie-data').listview('refresh');        
    }
}

您需要注意的是在添加内容后执行此功能：

$('#movie-data').listview('refresh');

它用于列表视图的重新样式化。

【讨论】：

感谢@gajotres，我根据自己的需要进行了调整，但它不起作用。你知道我哪里错了吗？ HTML:

JS: $('#movie-data ').append('
'); $('#movie-data').listview('refresh'); $('#collapsible1').append('
- 评分：Hello
使用 .listview('refresh');仅且仅在所有内容都已附加之后。但正如我所见，您正在动态添加更多列表视图内容。在这种情况下，您需要触发 $('#index').trigger('pagecreate');其中#index 是页面ID。因此，在您的页面上触发该功能。 .trigger('pagecreate');也应仅在附加所有内容后触发。
如果你还能让它工作，我会再给你一个例子。
非常感谢，这对我来说仍然很抽象！
.listview('refresh') 仅用于刷新/重新设置列表视图的样式，而 .trigger('pagecreate') 将重新设置整个内容的样式。