2014-01-15 7 views
0

Я получил некоторую помощь здесь раньше с проектом PhoneGap, который у меня был, но код, который я получил, был написан на Javascript и не работал в PhoneGap. Я видел, что он не использовал API PhoneGap, поэтому мой вопрос в том, может ли кто-нибудь помочь мне рассказать мне, что не так с кодом.Мой код работает в Интернете, но не PhoneGap & jQuery Mobile

Вот код для моего проекта: http://jsfiddle.net/ezanker/6kM3B/1/

Я пытался использовать API PG из этого кода, но все равно не работает. Итак, если вы понимаете Javascript & PhoneGap & 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, так что работает с API PhoneGap, это то, что я сделал, но все же, не работает. Я прочитал документы 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" : ""); 
} 
}; 
} 

Благодарим за полезный ответ.

+1

Не многие люди здесь собираются просканировать * это * много кода. Вам нужно усилить усилия, чтобы сузить причину проблемы самостоятельно. – Blazemonger

+0

Спасибо за ответ, и да, я это понимаю, но с самого начала я получил ссылку на JSFiddler, там есть первый HTML и Javascript. Дело в том, что он работает в JSFiddler, вы можете добавлять и видеть счетчик подсчет, но когда вы доберетесь до телефонного разговора и телефона, ничего не получится. Итак, просто посмотрите код JSFiddler, там не так много кода, и вы увидите, что он работает в JSFiddler. Я вижу, что API phonegap использует «window.localstorage», тогда как в моем коде это localstorage, но все же после изменений он не будет работать. Попробуй сузить его и отредактировать здесь позже :) – DMT82

+0

Как вы тестируете? Если вы добавите библиотеку Cordova и тест в браузер, это сработает? Я ничего не вижу в вашем коде, что помешало бы ему работать с Cordova, поэтому я предполагаю, что ваши проблемы связаны со строительным процессом или настройками устройства/платформы. Для android вы можете проверить журнал на наличие ошибок с помощью 'adb logcat CordovaLog: D *: S' – AJJ

ответ

0

Я собираюсь указать на возможную проблему, если это поможет, хотя я не могу быть уверен в том, является ли это источником вашей текущей проблемы.

Вы звоните localStorage на pageinit, без проверки deviceready (я предполагаю, если вы вывесили весь ваш код), и вы должны ждать этого события перед использованием localStorage на устройстве: http://docs.phonegap.com/en/3.1.0/cordova_storage_storage.md.html#Storage (обратите внимание на нижнюю часть страница для полного примера использования localStorage).

Это документация для ondeviceready: http://docs.phonegap.com/en/3.1.0/cordova_events_events.md.html#deviceready, у вас уже должен быть слушатель, определенный в index.js. Поэтому вы должны переместить весь ваш слушатель pageinit внутри слушателя ondeviceready.

Этот связанный с этим вопрос может помочь: LocalStorage doesn't work on PhoneGap

+0

Я сидел сегодня и посмотрел ВСЕ код и нашел проблему. Очень заторможенная проблема с моей стороны, настолько отсталая, что мне стыдно даже сказать здесь. ПРОБЛЕМА И РЕШЕНИЕ. Код JSFiddler основан на jQuery 1.9.1 и jq mobile 1.3.0b1, я был usin jQeery 1.6.4 и mobile 1.1.0, поэтому, когда я обновил файлы .js, он сработал ... Это было проблемой, все остальное было правильным – DMT82

Смежные вопросы