I am working on a project that makes use of Firebase Authentication and
<firebase-query>
polymerfire
Object
console.log()
vidobj
console.log
vidobj
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-singlevideo">
<template>
<style>
:host {
display: block;
}
</style>
<firebase-auth user="{{user}}"></firebase-auth>
<iron-localstorage
id="localstorage"
name="my-app-storage"
value="{{localUserDetails}}">
</iron-localstorage>
<h1>Name: [[user.displayName]]</h1>
<h1>Video Title: [[vidobj.title]]</h1>
</template>
<script>
Polymer({
is: 'my-singlevideo',
properties: {
user: {
type: Object,
},
localUserDetails: {
type: Object,
},
vidobj: {
type: Object,
},
},
ready: function() {
this.$.localstorage.reload();
var videoId = this.localUserDetails.lastClickedVid;
firebase.database().ref('/videos/' + videoId).once('value', function(snapshot) {
this.vidobj = snapshot.val();
console.log(this.vidobj);
console.log(this.vidobj.title);
});
},
});
</script>
</dom-module>
Your Firebase callback's context is not bound to your Polymer object, so you're actually setting vidobj
on the outer context (usually the Window
object).
To fix this, use Function#bind
like this:
ready: function() {
// ...
firebase.database().ref('/videos/' + videoId).once('value',
function(snapshot) {
this.vidobj = snapshot.val();
console.log(this.vidobj);
console.log(this.vidobj.title);
}.bind(this)
);
}