4

簡単な語彙ページを作成しています (現在、韓国語-英語用)。すべてのカードは localStorage に保存されます。以下のコードに示すように、複数のページ テンプレートで jQueryMobile を使用しています。

<html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Card Reader</title>

    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
    <link rel="stylesheet" href="docsdemos-style-override.css" />
    <script type="text/javascript" src="custom_codes.js"></script>
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
    <script>
    $('document').ready(function(){
    var list = JSON.parse(localStorage.getItem('cardList'));
    if(list==null){
        populateCards();
        list = JSON.parse(localStorage.getItem('cardList'));                
    }
    $cardList=$('#cardList');
    $cardList.empty();      
    $.each(list,function(i, value){
        $newItem = $('<li />');                                                                     
        $link = $('<a data-transition="slidefade" href="#wordListPage">'+value+'</a>');
        $link.attr('onClick',"loadWordList('"+value+"','wordList"+i+"')");
        $newItem.append($link);
        $cardList.append($newItem);             
    });     
});     

function loadWordList(cardName,cardId){
    var wordList = JSON.parse(localStorage.getItem(cardId));
    if(wordList==null){
        alert('no words in the list');              
        return;
    }
    $wList=$('#wordList');          
    $wList.empty();
    $list = $('<ul/>');
    $list.attr('data-role','listview');
    $.each(wordList,function(i, value){
        $newItem = $('<li />');
        $newItem.append('<h3>'+value['word']+'</h3>');              
        $newItem.append('<p>'+value['definition']+'</p>');          
        $list.append($newItem).trigger("create");
    });     
    $wList.append($list).trigger('create');     
    $('#cardTitle').html(cardName);     
}
</script>   

</head> 
<body> 

<div data-role="page" id="welcomePage">
    <h2>
        Welcome to Korean Learner
    </h2>
    <a data-transition="slidefade" href="#cardsListPage">           
        Load Cards          
    </a>
</div>

<div data-role="page" id="cardsListPage">
    <div data-role="content">
        <ul id="cardList" data-role="listview">
        </ul>
    </div>
</div>

<div data-role="page" id="wordListPage">
    <div data-role="header" class="ui-header ui-bar-b" data-position="fixed">
        <a data-rel="back">Back</a>
        <h1 id="cardTitle" >Card List</h1>
    </div>
    <div data-role="content" id="wordList">         

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

これをブラウザで確認すると、出力フローは次の画像のようになります。

新規ユーザーのためここに投稿できないため、画像へのリンク

cardList と wordlist をロードするために JavaScript を使用しました。populateCards() 関数は、カードの配列を localstorage にロードするだけの custom_codes.js の関数です。私が今得ている唯一のエラーは、最初のロード (フローの 3 番目のショット) で CSS なしで wordList ページがロードされ、戻った後 (最後のショット) は完全に問題ないことです。誰でもこのエラーを修正するのを手伝ってくれますか? また、これを携帯電話で使用することをターゲットにしているため、パフォーマンスのヒントをいくつか得られることを嬉しく思います.

4

1 に答える 1

3

jQM へようこそ。$(document).readyスターター ( http://jquerymobile.com/test/docs/api/events.htmlpageinit ) にもう使用しない jQuery とは異なり、 andイベントをリッスンするようにpageshowなりました。問題は、JS が実行されていることです。直後に起動するjQMが起動pageshowした後pageinit

pageshowページに戻ると再起動するため、戻ったときに機能します

jQM が起動pageshowすると、API から使用しているすべての CSS が通過して適用されます。しかし、それが起動したとき、要素をまだ追加していないため、jQM によってスタイルが設定されませんでした。

非同期呼び出しの後に要素が追加された場合は、手動で呼び出す必要がある.listview('refresh')と思います。

また、古い回答があり、JSをマルチページ環境で簡単に理解/デバッグできるように整理する方法を概説していますjQM JSを整理する方法

また、 welcomePageとcardsListPageが同じファイルにある場合は、単一ページのテンプレートを使用しています。

複数ページのテンプレートは、それらのページのそれぞれを別々のファイルに持つ場合です。パフォーマンスが心配な場合は、最初にロードするデータが少なくなるため、より良いと思います. ただし、リンクまたは独自の独自のソリューションにある JS セットアップに従う必要がありますが、基本的には、どのページから開始するかに関係なく、すべての JSを 1 回ロードしようとしています。そして、各pageinit/pageshowイベントを処理し、マルチページ テンプレートのどのページを使用しているかを判断する方法を用意します。

あなたはIDを使用していますが、マルチページテンプレートではjQMが任意のページを複数回ロードする可能性があるため、うまく機能しません（単一のDOMに、デバッガーをチェックして確認してください-domCachingがオンであると仮定します）。チェックすることでそれがどのページであるかを知ること.attr('id')が$('#cardsListPage')できます。

それがあなたの出発点になることを願っています。

于 2012-11-07T07:28:49.320 に答える