PouchDB上的PhoneGap(Android版) [英] PouchDB on Phonegap (Android)

查看:156
本文介绍了PouchDB上的PhoneGap(Android版)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是新来PouchDB,目前尝试使用Pouchdb我PhoneGap的Andr​​oid应用程序。我使用托多斯示例应用程序从 http://pouchdb.com/getting-started.html

I'm new to PouchDB, currently try to use Pouchdb on my Phonegap android app. I'm using Todos Sample App from http://pouchdb.com/getting-started.html.

它工作得很好的浏览器,而不是在Android(果冻豆4.2),我使用的HTC One迷你测试应用程序。

It worked fine on browser, but not on Android (Jelly Bean 4.2), I'm using HTC One Mini to test the app.

下面是我的code:

<!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 code:

Here is app.js code :

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();
  }

})();

问题:
当我加入待办事项,preSS enter..it后不会出现什么..
我不知道在我的Andr​​oid手机本地数据库中尚未创建的。

Problem : When i add a todos, after press enter..it doesn't appear anything.. I wonder the local database in my android phone not created yet.

希望有人能帮助我out..any答案将AP preciate!

Hope somebody could help me out..any answer would appreciate!

感谢

推荐答案

我有两个问题PouchDB与Android版本的工作早于4.2。

I had two problems with PouchDB working with Android versions earlier than 4.2.


    不支持
  1. 功能ATOB和BTOA。我结束了不使用它们,但是,原谅我,我不记得我究竟是如何评论/砍死他们。我当然没有用垫片更换它们。

  1. The functions atob and btoa were not supported. I ended up not using them, though, forgive me, I don't recall exactly how I commented/hacked them out. I certainly didn't replace them with a shim.

由于某些原因,INDEXDB,性LevelDB,的WebSQL preference订单不是为我工作。我不得不说具体使用的WebSQL。我看到一些code,它检测到您是否正在运行的PhoneGap /科尔多瓦,然后使用的WebSQL(这相当于sqllite在Android),但由于某种原因,这不是任何工作。

For some reason the indexdb, leveldb, websql preference order wasn't working for me. I had to specifically say use websql. I saw some code that detected whether you were running phonegap/cordova, and then uses websql (which translates to sqllite on Android), but for some reason that wasn't working either.

希望帮助!

这篇关于PouchDB上的PhoneGap(Android版)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆