Geek Answers Handbook

Polymer 1.2 FIREBASE WARNING: Exception was caused by user callback

I have some problems with polymer and firebase, I managed to insert data into firebase, but it gives an error

FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'updateArticole' of null

Below is my code so far.

  <!doctype html> <!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.imtqy.com/LICENSE.txt The complete set of authors may be found at http://polymer.imtqy.com/AUTHORS.txt The complete set of contributors may be found at http://polymer.imtqy.com/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.imtqy.com/PATENTS.txt --> <html lang=""> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="generator" content="Polymer Starter Kit" /> <title>Soulmatters</title> <!-- Place favicon.ico in the `app/` directory --> <!-- Chrome for Android theme color --> <meta name="theme-color" content="#2E3AA1"> <!-- Web Application Manifest --> <link rel="manifest" href="manifest.json"> <!-- Tile color for Win8 --> <meta name="msapplication-TileColor" content="#3372DF"> <!-- Add to homescreen for Chrome on Android --> <meta name="mobile-web-app-capable" content="yes"> <meta name="application-name" content="PSK"> <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit"> <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png"> <!-- Tile icon for Win8 (144x144) --> <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> <!-- build:css styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild--> <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js --> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> <!-- endbuild --> <!-- will be replaced with elements/elements.vulcanized.html --> <link rel="import" href="elements/elements.html"> <link rel="import" href="../bower_components/firebase-element/firebase-auth.html"> <link rel="import" href="../bower_components/firebase-element/firebase.html"> <link rel="import" href="../bower_components/paper-input/paper-input.html"> <link rel="import" href="../bower_components/paper-button/paper-button.html"> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html"> <link rel="import" href="../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../bower_components/iron-icon/iron-icon.html"> <!-- endreplace--> <!-- For shared styles, shared-styles.html import in elements.html --> <style is="custom-style" include="shared-styles"> body { font-family: Roboto, sans-serif; color: #333; max-width: 700px; width: 100%; margin: 0 auto; } form { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; } paper-button { flex-shrink: 1; } paper-input { flex-grow: 1; } paper-checkbox { display: inline-block; margin: 5px 0; transition: opacity 0.3s; } paper-checkbox[checked] { opacity: 0.5; } </style> </head> <body unresolved class="fullbleed layout vertical"> <span id="browser-sync-binding"></span> <template is="dom-bind" id="app"> <firebase-auth auto-login redirect location="[[firebaseURL]]" provider="[[firebaseProvider]]" on-error="onFirebaseError" on-login="onFirebaseLogin"></firebase-auth> <paper-toast id="errorToast"></paper-toast> <form on-submit="addItem"> <paper-input value="{{articolNou}}" placeholder="Enter your item here..."></paper-input> <paper-button on-click="addItem">Add</paper-button> </form> <template is="dom-repeat" items="{{articol}}"> <div> <div>{{articolNou}}</div> </div> </template> </template> <!-- build:js scripts/app.js --> <script src="scripts/app.js"></script> <!-- endbuild--> </body> </html>

And this is the app.js application

 (function(document) { 'use strict'; var app = document.querySelector('#app'); app.articole = []; app.updateArticole = function(snapshot) { this.articole = ['articole']; snapshot.forEach(function(childSnapshot) { var item = childSnapshot.val(); item.uid = childSnapshot.key(); this.push('articole', item); }.bind(this)); }; app.addItem = function(event) { event.preventDefault(); // Don't send the form! this.ref.push({ text: app.articolNou }); app.articolNou = ''; }; /*app.toggleItem = function(event) { this.ref. child(event.model.item.uid). update({done: event.model.item.done}); }; app.deleteItem = function(event) { this.ref.child(event.model.item.uid).remove(); }; */ app.firebaseURL = 'https://soulmatters.firebaseio.com'; app.firebaseProvider = 'google'; app.onFirebaseError = function(event) { this.$.errorToast.text = event.detail.message; this.$.errorToast.show(); }; app.onFirebaseLogin = function(event) { this.ref = new Firebase(this.firebaseURL + '/user/' + event.detail.user.uid); this.ref.on('value', function(snapshot) { this.updateArticole(snapshot); }); }; })(document);
+6
source share
1 answer

Try changing your code as follows:

 app.onFirebaseLogin = function(event) { this.ref = new Firebase(this.firebaseURL + '/user/' + event.detail.user.uid); var self = this; this.ref.on('value', function(snapshot) { self.updateArticole(snapshot); }); };
+8
source

More articles:


All Articles