0

jQuery Mobile を使用してネイティブ モバイル アプリケーションを構築し、それを PhoneGap でラップしようとしています。これは、モバイル アプリケーションを作成する最初の試みであり、通常は単純なトピックで迷っています。このアプリケーションでは、ユーザーが高校のフットボール チームのスコア、スケジュール、および統計を参照できるようにします。ドロップダウン リスト (#search-schedules) にすべてのチームを表示するページがあります。ユーザーがチームを選択すると、チーム ID の値が投稿され、そのチームのスケジュールが別のページ (#schedules) に表示されます。アプリケーション全体に必要なすべての jQuery を含む custome.js ファイルを含めます。私がこれまでに持っているもの (この質問に対処する) は以下のとおりです。これを達成するための最良の方法に関する指示は大歓迎です。

これは、ユーザーがチームを選択するページです。

<div data-role="page" id="search-schedules">
    <div data-role="header"><h1>Find Schedules</h1></div>
    <div data-role="content">
        <p align="center"><strong>Select a school from the list below to view their schedule</strong></p>
        <form id="schedules-form" data-transition="pop" data-direction="reverse" />
            <div align="center" data-role="fieldcontain">
                <select name="school" id="school-select">
                    <option value="">Select A School</option>
                </select>
                <p><input type="submit" id="submit" name="submit" value="Get Schedule" data-theme="b" /></p>
            </div>
        </form>
    </div>
    <ul data-role="listview" data-dividertheme="e">
        <li><a href="#home" data-transition="slide">Home Page</a></li>
    </ul>
    <div data-role="footer"><h1>Footer</h1></div>
</div>

これは、スケジュールが表示されるページです。

<div data-role="page" id="schedules">
    <div data-role="header"><h1>Schedules</h1></div>
    <div data-role="content">
        <h2 align="center"></h2>
        <div id="schedule-div"></div>
    </div>
    <ul data-role="listview" data-dividertheme="e">
        <li><a href="index.php" data-transition="slide">Home Page</a></li>
    </ul>
    <div data-role="footer"><h1>Footer</h1></div>
</div>

これは、フォームを送信する JS です。

$('#schedules-form').bind('submit', function (e) {
    e.preventDefault();
    $.post(serviceURL + 'schedules.php', $(this).serialize(), function(response) {
        $.mobile.changePage('#schedules', {
            transition: 'slide'
        });
    });
});

これは、スケジュールを表示する JS です。

$('#schedules').live('pageshow', function(event) {
    var team = ''; // How do I grab a POST variable?
    $.post(serviceURL + 'schedules.php', team, function(data) {
        var games = data.item;
        $.each(games, function(index, game) {
            $('#schedule-div').append('<p>' + game.game_date + ' - ' + game.visitor_team + ' @ ' + game.home_team + '</p>');
        });
        $('#schedule-div').listview('refresh');
    });
};
4

1 に答える 1

0

私の理解では、jQuery モバイルは現在のページを実際に変更するのではなく、後続のページを DOM にロードするだけです。チーム リンクでページ遷移を発生させ、チームのスケジュールを取得するために必要な ID を 'data-teamId' 属性で渡します。「pageload」などの jQuery モバイル イベントの 1 つを使用して (イベントが発生する正確な瞬間についてはまだ詳しく調べていません)、リンク クリックで取得したデータ属性を使用して ajax 経由でチーム スケジュールの読み込みを開始します。完了したら、スケジュールを表示します。

于 2012-09-26T21:01:56.020 に答える