Question

我之前通过PhoneGap项目得到了一些帮助，但我得到的代码是用Javascript编写的，并没有在PhoneGap上工作。我看到它没有使用PhoneGap API，所以我的问题是，如果有人可以帮我告诉我代码有什么问题。

以下是我项目的代码： http://jsfiddle.net/ezanker/6kM3B/1/

我尝试使用此代码中的PG API，但仍然没有用。所以如果你理解Javascript＆amp; PhoneGap＆amp; jQuery Mobile，如果有人可以转换或告诉我代码有什么不对，那就太好了。

HTML文件：

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Last Time I Did It!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/jquery-1.6.4.js"></script>
<script src="lib/jquery.mobile-1.1.0.js"></script>
<link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
<link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>

<div data-role="page" id="page1">
    <div data-role="header">            
        <h1>Last time I did it</h1>
    </div>
    <div data-role="content"></div>
    <div data-role="footer">
    <div data-role="navbar">
        <ul>
           <li>
              <a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
           </li>
           <li>
              <a data-role="button" href="#page3" data-transition="slide" id="show" data-rel="page">SHOW</a>
           </li>
        </ul>
    </div>
    </div>
</div>
<div data-role="page" id="page2">
   <div data-role="header">            
       <h1>Add event</h1>
   </div>
   <div data-role="content">
   <textarea id="newItemText"></textarea>
   </div>
   <div data-role="footer">
      <div data-role="navbar">
          <ul>
             <li>
                <a data-role="button"  href="#" data-transition="slide" id="btnSave">SAVE</a>
             </li>
             <li>
                <a data-role="button" href="#page1" id="btnCancel" data-transition="slide"    data-direction="reverse" data-rel="page">CANCEL</a>
             </li>
          </ul>
      </div>
  </div>
</div>
<div data-role="page" id="page3">
  <div data-role="header">
    <a href="#page2"  class="ui-btn-left" data-rel="back" data-transition="slide">Back</a>
    <h1>Events</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" id="orderedList" data-inset="true">

    </ul>
  </div>
  <div data-role="footer">
     <div data-role="navbar">
      <ul>
        <li>
            <a data-role="button" id="edit">EDIT</a>
        </li>
        <li>
            <a data-role="button" id="delete">DELETE</a>
        </li>
      </ul>
     </div>
  </div>
  </div>
  <script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
</body>
</html>

以下是Javascript代码：

$(document).on('pagebeforeshow', '#page3', function(){ 
//setup the current list

if(localStorage.getItem('TaskList')){
    var TheList = [];
    TheList = JSON.parse(localStorage.getItem('TaskList'));
    var items = '';

    for (var i = 0; i < TheList.length; i++) {
        items += '<li><h3>' + TheList[i].text + '</h3><p>' + timeAgo( (new
Date(TheList[i].time).getTime())/1000) + ' ago<p></li>';
    }

    $('#orderedList').empty().append($(items)).listview('refresh');

}

});


$(document).on('pageinit', '#page2', function(){ 

$('#btnCancel').on("click", function(){
    $('#newItemText').val(''); //CLEAR TEXT AREA
});

$('#btnSave').on("click", function(){

    var TheList = [];
    if(localStorage.getItem('TaskList')){
        TheList = JSON.parse(localStorage.getItem('TaskList'));
    }
    var newitem = $('#newItemText').val(); 
    var task = {text: newitem, time: new Date() };
    TheList.push(task);
    localStorage.setItem('TaskList', JSON.stringify(TheList));

    $('#newItemText').val(''); //CLEAR TEXT AREA
    $.mobile.navigate( "#page3", { transition : "slide" });

});

});

function timeAgo(time){
var units = [
{ name: "second", limit: 60, in_seconds: 1 },
{ name: "minute", limit: 3600, in_seconds: 60 },
{ name: "hour", limit: 86400, in_seconds: 3600  },
{ name: "day", limit: 604800, in_seconds: 86400 },
{ name: "week", limit: 2629743, in_seconds: 604800  },
{ name: "month", limit: 31556926, in_seconds: 2629743 },
{ name: "year", limit: null, in_seconds: 31556926 }
];
var diff = (new Date() - new Date(time*1000)) / 1000;
if (diff < 5) return "now";

var i = 0;
while (unit = units[i++]) {
if (diff < unit.limit || !unit.limit){
  var diff =  Math.floor(diff / unit.in_seconds);
  return diff + " " + unit.name + (diff>1 ? "s" : "");
}
};
}

我还尝试更改整个Javascript代码，以便它与PhoneGap API一起使用，这就是我所做的，但仍然无法正常工作。我阅读了PhoneGap文档，查看了一些教程，甚至阅读了一本简单的Javascript书来理解，但是这，这让我很头疼。

// load function.
function loadList()
        {
    var theList = window.localStorage.getItem('TaskList'));
        var items = '';

        if (null != theList || theList != "null")
            {
                for (var i = 0; i < theList.length; i++) {
        items += '<li><h3>' + theList[i].text + '</h3><p>' + timeAgo( (new     Date(theList[i].time).getTime())/1000) + ' ago<p></li>';
            }
        }

    $('#orderedList').empty().append($(items)).listview('refresh');
}

function saveList()
        {
        var listArray = {};
        var textValue = "";

        var list = document.getElementById("orderedList");
        window.localStorage.setItem("TaskList", JSON.stringify(listArray));
        }

function timeAgo(time){
var units = [
{ name: "second", limit: 60, in_seconds: 1 },
{ name: "minute", limit: 3600, in_seconds: 60 },
{ name: "hour", limit: 86400, in_seconds: 3600  },
{ name: "day", limit: 604800, in_seconds: 86400 },
{ name: "week", limit: 2629743, in_seconds: 604800  },
{ name: "month", limit: 31556926, in_seconds: 2629743 },
{ name: "year", limit: null, in_seconds: 31556926 }
];
var diff = (new Date() - new Date(time*1000)) / 1000;
if (diff < 5) return "now";

var i = 0;
while (unit = units[i++]) {
if (diff < unit.limit || !unit.limit){
  var diff =  Math.floor(diff / unit.in_seconds);
  return diff + " " + unit.name + (diff>1 ? "s" : "");
}
};
}

感谢您提供任何有用的答案。

Answer 1

我会指出一个可能的问题，以防它有所帮助，虽然我无法确定这是否是您当前问题的根源。

您正在localStorage上调用pageinit，而不检查deviceready（我假设，如果您发布了所有代码），那么您应该在使用{{1}之前等待该事件在设备上：http://docs.phonegap.com/en/3.1.0/cordova_storage_storage.md.html#Storage（请查看页面底部以获取如何使用localStorage的完整示例）。

这是localStorage：http://docs.phonegap.com/en/3.1.0/cordova_events_events.md.html#deviceready的文档，您必须在ondeviceready中定义一个侦听器。因此，您应该将所有index.js侦听器移到pageinit侦听器中。

此相关问题可能有所帮助：LocalStorage doesn't work on PhoneGap

我的代码适用于网络，但不适用于PhoneGap＆amp; jQuery Mobile

1 个答案: