Question

我只能假设在使用动态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周围使用它等等做这样的事情，而不必从头开始构建所有东西。想以正确的方式做到这一点。

Answer 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');

用于列表视图重新打印。

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

1 个答案: