Menu
I have some issues with polymer and firebase, I managed to insert data into firebase but it throws an error
FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'updateArticole' of null
Below its 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.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/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.github.io/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
(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);
303
Try to modify your code like this:
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);
});
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
