Ionic + LokiJS总是生成“ionic.bundle.js:26794 TypeError:无法读取未定义的属性'insert'”

时间:2016-08-03 15:29:07

标签: javascript angularjs cordova ionic-framework lokijs

在我遇到SQLite的所有问题后,我想为我的Ionic应用程序使用不同的解决方案。经常提到LokiJS,所以我试了一下。但是对于LokiJS我没有运气。

目前我有一个非常基本的代码,应该没有问题:

.controller('ProjectsController', ['$scope', '$state', '$ionicPlatform', function($scope, $state, $ionicPlatform) {
  var pcVm = this;

  var db;
  var projects1;

  $ionicPlatform.ready(function(){

    var idbAdapter = new LokiIndexedAdapter('loki');
    db = new loki('lkr-v4', {
      autoload: true,
      autoloadCallback : getAllProjects,
      autosave: true,
      autosaveInterval: 10000,
      adapter: idbAdapter
    });

    function getAllProjects() {
      var options = {};
      db.loadDatabase(options, function() {
        projects1 = db.getCollection('projects'); // GET
        if (!projects1) {
          projects1 = db.addCollection('projects'); // ADD
        }
        console.log('Databaseinformation');
        console.log(db);
        console.log('Collectioninformation');
        console.log(projects1);
      });
    }

    console.log('Insert something');
    projects1.insert({ name : 'odin' });
  }); // End of .ready()

但我总是得到消息:

ionic.bundle.js:26794 TypeError: Cannot read property 'insert' of undefined
    at controllers.js:309
    at ionic.bundle.js:56230
    at Object.ready (ionic.bundle.js:2140)
    at Object.ready (ionic.bundle.js:56223)
    at new <anonymous> (controllers.js:283)
    at Object.instantiate (ionic.bundle.js:18010)
    at $controller (ionic.bundle.js:23412)
    at self.appendViewElement (ionic.bundle.js:59900)
    at Object.render (ionic.bundle.js:57893)
    at Object.init (ionic.bundle.js:57813)(anonymous function) @ ionic.bundle.js:26794(anonymous function) @ ionic.bundle.js:23507$broadcast @ ionic.bundle.js:30720$state.transition.resolved.then.$state.transition @ ionic.bundle.js:52157processQueue @ ionic.bundle.js:29127(anonymous function) @ ionic.bundle.js:29143$eval @ ionic.bundle.js:30395$digest @ ionic.bundle.js:30211$apply @ ionic.bundle.js:30503done @ ionic.bundle.js:24824completeRequest @ ionic.bundle.js:25022requestLoaded @ ionic.bundle.js:24963
controllers.js:301 Databaseinformation

请帮忙。也许我和SQLite和LokiJS有同样的问题?但我找不到问题...

谢谢, 基督教。

更新 - 2016-08-05

所以,我花了几个小时的时间进行搜索,尝试,并总是以相同的错误结束。我想知道为什么所有的教程看起来都一样,似乎有用,但对我来说,它是不可能让它运行的。

我完全改写了我的工厂:

(function() {
  'use strict';

  angular.module('lkr-v4')

    .factory('PersistenceService', ['$q', 'Loki', PersistenceService]);

      function PersistenceService($q, Loki) {
        // Needed variables
        var lkrDb; // Database
        var projects; // Collection of JSON strings

        // Accessible Members Up Top
        // https://github.com/johnpapa/angular-styleguide/tree/master/a1#style-y052
        var pService = {
          initDB: initDB,
          getAllProjects: getAllProjects,
          addProject: addProject,
          updateProject: updateProject,
          deleteProject: deleteProject
        };
        return pService;

        // Initialization of the database
        function initDB() {
          var idbAdapter = new LokiIndexedAdapter('loki');
          lkrDb = new loki('lkr-v4', {
            autoload: true,
            autoloadCallback: getAllProjects,
            autosave: true,
            autosaveInterval: 10000,
            adapter: idbAdapter
          });
        }

        // Function to return a collection of JSON strings (all found projects) in the LokiJS database file
        function getAllProjects() {
          // What is $q? See https://docs.angularjs.org/api/ng/service/$q
          return $q(function (resolve, reject) {
            var options = {};
            lkrDb.loadDatabase(options, function () {
              projects = lkrDb.getCollection('projects'); // GET!
              // If the database file is empty
              if (!projects) {
                projects = lkrDb.addCollection('projects'); // ADD!
              }
              resolve(projects.data);
            });
          });
        }

        // Function to add a project
        function addProject(project) {
          if(lkrDebug) {
            console.log('Inside of addProject from the factory');
            console.log('This is the projects object');
            console.log(this.projects);
            console.log('This is the given value of the new project');
            console.log(project);
          }
          projects.insert(project);
        }

        // Function to update a project
        function updateProject(project) {
          projects.update(project);
        }

        // Function to delete a project
        function deleteProject(project) {
          projects.remove(project);
        }

      } // End of function PersistenceService

})(); // End of IIFE

我在app.js的run()中调用PersistenceService.initDB()。这个工作!

我的所有页面(4)都有自己的控制器,在控制器上使用。在我的第一页的控制器中,我尝试了这段代码:

  // Test #1: Get data
  PersistenceService.getAllProjects().then(function(projects) {
    pcVm.projects = projects;
    if(lkrDebug) {
      console.log('Inside of getAllProjects().then() from the controller');
      console.log('This is the project object from the PersistenceService');
      console.log(projects);
      console.log('And this ist the pcVm.projects object from the controller');
      console.log(pcVm.projects);
    }
  });

IT工作!我可以在consloe中看到正确的信息,我没有收到任何错误。

下一个代码直接放在同一控制器中的上述代码之后:

  // Test #2: Add a project
  PersistenceService.addProject({ name : 'odin' });

它在控制台上生成以下行(和错误)

Inside of addProject from the factory
persistence.services.js:65 This is the projects object
persistence.services.js:66 undefined
persistence.services.js:67 This is the given value of the new project
persistence.services.js:68 Object {name: "odin"}
ionic.bundle.js:26794 TypeError: Cannot read property 'insert' of undefined
    at Object.addProject (persistence.services.js:70)
    at new ProjectsController (projects.controller.js:31)
    at Object.instantiate (ionic.bundle.js:18010)
    at $controller (ionic.bundle.js:23412)
    at self.appendViewElement (ionic.bundle.js:59900)
    at Object.render (ionic.bundle.js:57893)
    at Object.init (ionic.bundle.js:57813)
    at self.render (ionic.bundle.js:59759)
    at self.register (ionic.bundle.js:59717)
    at updateView (ionic.bundle.js:65398)(anonymous function) @ ionic.bundle.js:26794(anonymous function) @ ionic.bundle.js:23507$broadcast @ ionic.bundle.js:30720$state.transition.resolved.then.$state.transition @ ionic.bundle.js:52157processQueue @ ionic.bundle.js:29127(anonymous function) @ ionic.bundle.js:29143$eval @ ionic.bundle.js:30395$digest @ ionic.bundle.js:30211$apply @ ionic.bundle.js:30503done @ ionic.bundle.js:24824completeRequest @ ionic.bundle.js:25022requestLoaded @ ionic.bundle.js:24963
projects.controller.js:22 Inside of getAllProjects().then() from the controller
projects.controller.js:23 This is the project object from the PersistenceService
projects.controller.js:24 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
projects.controller.js:25 And this ist the pcVm.projects object from the controller
projects.controller.js:26 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

这有点奇怪,因为对我来说,看起来像addProject()被称为bevore getAllProjects()?

所以我添加了行console.log(lkrDb);在addProject-function中,查看数据库是否已加载,我还做了一些测试。事实证明,app.js中的initDB正在运行,并且addProject函数也可以与打开的数据库一起使用。

我的结论是,我在控制器或getAllProjects函数中做错了什么!?

我会继续搜索,但我真的会感谢任何提示...

谢谢, 基督教。

2 个答案:

答案 0 :(得分:0)

projects1未正确初始化您必须在projects1.insert() db.loadDatabase()

之后致电callback

这应该有效。这只是一个尖峰,尝试使用factory进行数据库操作。并通过javascript变量范围,以便您不再遇到此问题。

db.loadDatabase(options, function() {
  projects1 = db.getCollection('projects');
  if (!projects1) {
    projects1 = db.addCollection('projects');
  }
  projects1.insert({name: 'odin'});      

  });

希望它有所帮助,Happy Coding:)

更新:请根据您的实际问题更新问题。

答案 1 :(得分:0)

现在我了解承诺的事情!这对我帮助很大:http://andyshora.com/promises-angularjs-explained-as-cartoon.html

但是,即使这是我必须真正照顾的事情,这也不是问题所在。问题是基于我使用的教程。我不知道为什么和如何,但是tutorilas工作,我的应用程序不仅仅是因为:只要我不调用getAllProjects()函数,projects1变量就没有数据。 autoloadCallback不会自动调用该函数!?我在LokiJS项目中打开了一个问题,询问我做错了什么,或者这不是autoloadCallback的想法。

当我有一个完整的工作解决方案时,我会在这里发布...