1

我只能假设我正在尝试做的是使用动态 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 上使用的预构建代码等，这些代码可以执行类似的操作，而无需我从头开始构建所有内容。想要以正确的方式做到这一点。

4

1 回答 1

2

你不需要一个特殊的框架，你需要的一切都已经是 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');

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

于 2013-01-26T11:00:14.560 回答