2013-12-12 61 views
1

我是PouchDB的新手,目前嘗試在Phonegap android應用上使用Pouchdb。我正在使用http://pouchdb.com/getting-started.html的Todos Sample App。Phonegap上的PouchDB(Android)

它在瀏覽器上正常工作,但不在Android上(Jelly Bean 4.2),我正在使用HTC One Mini來測試應用程序。

這裏是我的代碼:

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>VanillaJS TodoMVC</title> 
    <link rel="stylesheet" href="style/base.css"> 
    <!--[if IE]> 
     <script src="style/ie.js"></script> 
    <![endif]--> 
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> 


    </head> 
    <body> 
    <section id="todoapp"> 
     <header id="header"> 
    <h1>todos</h1> 
    <input id="new-todo" placeholder="What needs to be done?" autofocus value=""> 
     </header> 
     <section id="main"> 
    <ul id="todo-list"></ul> 
     </section> 
     <footer id="footer"> 
    <span id="todo-count"></span> 
     <div id="sync-wrapper"> 
      <div id="sync-success">Currently syncing</div> 
      <div id="sync-error">There was a problem syncing</div> 
     </div> 
     </footer> 
    </section> 
    <script src="js/pouchdb-nightly.min.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/base.js"></script> 
    </body> 
</html> 

這裏是app.js代碼:

document.addEventListener("deviceready", onDeviceReady, false); 

function onDeviceReady(){}  


(function() { 

    'use strict'; 

    var ENTER_KEY = 13; 
    var newTodoDom = document.getElementById('new-todo'); 
    var syncDom = document.getElementById('sync-wrapper'); 

    // EDITING STARTS HERE (you dont need to edit anything above this line) 

    var db = new PouchDB('todos'); 
    var remoteCouch = false; 

    db.info(function(err, info) { 
    db.changes({ 
     since: info.update_seq, 
     continuous: true, 
     onChange: showTodos 
    }); 
    }); 

    // We have to create a new todo document and enter it in the database 
    function addTodo(text) { 
     var todo = { 
     _id: new Date().toISOString(), 
     title: text, 
     completed: false 
     }; 

     db.put(todo, function callback(err, result) { 
     if(!err) { 
      console.log('Successfully posted a todo!'); 
     } 
     }); 
    } 

    // Show the current list of todos by reading them from the database 
    function showTodos() { 
     db.allDocs({include_docs: true, descending:true}, function(err,doc) { 
      redrawTodosUI(doc.rows); 
     }); 
    } 

    function checkboxChanged(todo, event) { 
     todo.completed = event.target.checked; 
     db.put(todo); 
    } 

    // User pressed the delete button for a todo, delete it 
    function deleteButtonPressed(todo) { 
     db.remove(todo); 
    } 

    // The input box when editing a todo has blurred, we should save 
    // the new title or delete the todo if the title is empty 
    function todoBlurred(todo, event) { 
     var trimmedText = event.target.value.trim(); 

     if(!trimmedText) { 
     db.remove(todo); 
     } else { 
     todo.title = trimmedText; 
     db.put(todo); 
     } 
    } 

    // Initialise a sync with the remote server 
    function sync() { 
    } 

    // EDITING STARTS HERE (you dont need to edit anything below this line) 

    // There was some form or error syncing 
    function syncError() { 
    syncDom.setAttribute('data-sync-state', 'error'); 
    } 

    // User has double clicked a todo, display an input so they can edit the title 
    function todoDblClicked(todo) { 
    var div = document.getElementById('li_' + todo._id); 
    var inputEditTodo = document.getElementById('input_' + todo._id); 
    div.className = 'editing'; 
    inputEditTodo.focus(); 
    } 

    // If they press enter while editing an entry, blur it to trigger save 
    // (or delete) 
    function todoKeyPressed(todo, event) { 
    if (event.keyCode === ENTER_KEY) { 
     var inputEditTodo = document.getElementById('input_' + todo._id); 
     inputEditTodo.blur(); 
    } 
    } 

    // Given an object representing a todo, this will create a list item 
    // to display it. 
    function createTodoListItem(todo) { 
    var checkbox = document.createElement('input'); 
    checkbox.className = 'toggle'; 
    checkbox.type = 'checkbox'; 
    checkbox.addEventListener('change', checkboxChanged.bind(this, todo)); 

    var label = document.createElement('label'); 
    label.appendChild(document.createTextNode(todo.title)); 
    label.addEventListener('dblclick', todoDblClicked.bind(this, todo)); 

    var deleteLink = document.createElement('button'); 
    deleteLink.className = 'destroy'; 
    deleteLink.addEventListener('click', deleteButtonPressed.bind(this, todo)); 

    var divDisplay = document.createElement('div'); 
    divDisplay.className = 'view'; 
    divDisplay.appendChild(checkbox); 
    divDisplay.appendChild(label); 
    divDisplay.appendChild(deleteLink); 

    var inputEditTodo = document.createElement('input'); 
    inputEditTodo.id = 'input_' + todo._id; 
    inputEditTodo.className = 'edit'; 
    inputEditTodo.value = todo.title; 
    inputEditTodo.addEventListener('keypress', todoKeyPressed.bind(this, todo)); 
    inputEditTodo.addEventListener('blur', todoBlurred.bind(this, todo)); 

    var li = document.createElement('li'); 
    li.id = 'li_' + todo._id; 
    li.appendChild(divDisplay); 
    li.appendChild(inputEditTodo); 

    if (todo.completed) { 
     li.className += 'complete'; 
     checkbox.checked = true; 
    } 

    return li; 
    } 

    function redrawTodosUI(todos) { 
    var ul = document.getElementById('todo-list'); 
    ul.innerHTML = ''; 
    todos.forEach(function(todo) { 
     ul.appendChild(createTodoListItem(todo.doc)); 
    }); 
    } 

    function newTodoKeyPressHandler(event) { 
    if (event.keyCode === ENTER_KEY) { 
     addTodo(newTodoDom.value); 
     newTodoDom.value = ''; 
    } 
    } 

    function addEventListeners() { 
    newTodoDom.addEventListener('keypress', newTodoKeyPressHandler, false); 
    } 

    addEventListeners(); 
    showTodos(); 

    if (remoteCouch) { 
    sync(); 
    } 

})(); 

問題: 當我添加一個待辦事項後,按enter..it不會出現什麼.. 我不知道我的android手機中的本地數據庫尚未創建。

希望有人能幫助我...任何答案將不勝感激!

謝謝

+0

對此有什麼好運?看起來你已經發布了一段時間了。 –

回答

0

我有兩個問題PouchDB與Android版本比4.2更早的工作。

  1. 函數atob和btoa不被支持。但我最終沒有使用它們,原諒我,我不記得我是如何評論/抨擊他們的。我當然沒有用墊片來代替它們。

  2. 出於某種原因,INDEXDB,性LevelDB,的WebSQL優先順序不是爲我工作。我不得不專門說使用websql。我看到檢測到您是否正在運行的PhoneGap /科爾多瓦,然後使用的WebSQL(這相當於sqllite Android上的)一些代碼,但由於某些原因,沒有任何工作。

希望幫助!

0

我在我的項目中也有同樣的問題。它在Android 4.0.3上工作正常,但在4.1和4.2.2上不工作。 我在網上搜索了很多,發現問題出在新的android平臺上,而不是在pouchdb中。如果妳真想在本地存儲工作只是使用IndexedDB的

請參閱此鏈接https://github.com/daleharvey/pouchdb/issues/504