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>

当我在浏览器中检查时，输出流程如下图所示：

链接到图片，因为我不能在此处发布为新用户

我使用 javascript 加载 cardList 和 wordlist。populateCards() 函数是 custom_codes.js 中的一个函数，它仅将一组卡片加载到本地存储中。我现在得到的唯一错误是 wordList 页面在第一次加载时没有 CSS 加载（第三次流动），并且在我回来后完全没问题（最后一次）。谁能帮我解决这个错误。此外，我很高兴获得一些性能提示，因为我的目标是在手机中使用它。

4

1 回答 1

3

欢迎来到 jQM，不像 jQuery，你不再使用$(document).ready初学者（http://jquerymobile.com/test/docs/api/events.html）你现在监听pageinitandpageshow事件，可能你的问题是你的 JS 正在运行在 jQM 触发之后pageshow立即触发pageinit

pageshow当您导航回页面时重新触发，这就是为什么当您返回时它正在工作

当 jQM 触发pageshow时，它会通过并应用您从其 API 使用的任何 CSS。但是当它被触发时，你还没有添加元素，所以它们没有被 jQM 设置样式。

.listview('refresh')如果元素是在通过异步调用之后添加的，那么我认为您也需要手动调用。

我还有一个较旧的答案，我在其中概述了我如何组织我的 JS，以便在多页环境中易于理解/调试如何组织你的 jQM JS

如果welcomePage和cardsListPage在同一个文件中，您也使用单页模板。

多页模板是当您将这些页面中的每一个都放在一个单独的文件中时，我认为这更好，因为如果您担心性能，那么您在开始时加载的数据更少。但是您需要遵循我在链接中的 JS 设置或您自己的解决方案，但无论您从哪个页面开始，您基本上都在尝试加载所有 JS。并处理每个pageinit/pageshow事件，并通过某种方式确定您在多页模板中的哪一页。

您正在使用ids但效果不佳，因为在多页面模板中，jQM 可能会多次加载任何页面（进入单个 DOM，检查调试器以查看 - 假设 domCaching 已打开），我猜你仍然通过检查知道它是什么页面，.attr('id')但它具有误导性，因为如果你这样做，$('#cardsListPage')你可能会得到许多元素之一。

希望这能让你开始。

于 2012-11-07T07:28:49.320 回答