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 に答える