My current setup involves utilizing the <firebase-document> element to retrieve data from Firebase. The data is then bound to {{poster}}, which allows me to access details of the poster object using its keys. For instance, {{poster.name}} displays the name of the poster. However, when attempting to use {{poster.name}} in a script by executing console.log(this.poster.name), an error displaying undefined occurs. How can I successfully access the bound data stored in {{poster}}?
Below is my HTML element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/plastr-poster/plastr-poster.html">
<link rel="import" href="../bower_components/polymerfire/firebase-document.html">
<link rel="import" href="../bower_components/app-metadata/app-metadata.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-details">
<template>
<style include="shared-styles">
:host {
display: block;
}
</style>
<app-route
route="{{route}}"
pattern="/:poster_id"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<firebase-document
id="firebaseDoc"
path="/posters/[[routeData.poster_id]]"
data="{{poster}}">
</firebase-document>
<app-metadata></app-metadata>
<div class="poster_board">
<a href="./[[routeData.poster_id]]">
<plastr-poster id="poster" name="[[poster.name]]" location=[[poster.location]] poster="[[poster.poster]]" date="[[poster.date]]"></plastr-poster>
</a>
</div>
</template>
<script>
Polymer({
is: 'my-details',
ready: function() {
this.fire('app-metadata', {
title: this.poster.name,
description: "things to do in your 'hood",
keywords: 'events, posters, local, music, dance, art'
});
console.log(this.poster.name);
},
attached: function() {
// This line will create the singleton element if it hasn't been created yet
Polymer.AppMetadata.requestAvailability();
},
properties: {
prop1: {
type: String,
value: 'plastr-app',
},
}
});
</script>
</dom-module>