CODEWITHSUNDEEP
polymerpolymer-1.0
user3240644
user3240644

Reputation: 2281

Polymer - ready event but bounded data not ready

In the todo-list app from PolymerLabs , I added a ready() function in todo-data.html as follows:

<dom-module id="todo-data">

  <template>

  <style>

  </style>

  <firebase-collection location="{{userLocation}}"
                     data="{{fbTodos}}"
                     on-firebase-value="_firebaseLoaded">
  </firebase-collection>

  .....
</template>
<script>
  Polymer({

    is: 'todo-data',

  properties: {

    todos: {
      notify: true
    },

    user: {
      observer: '_userChanged'
    },

   .......

    ready: function() {
      console.log(this.user);
  }

});

The user attribute value is bounded to it from index.html as follows:

//index.html 
<template is="dom-bind" id="app">

<todo-auth id="auth"
           user="{{user}}"
           location="[[firebaseURL]]"
           user="{{user}}">
</todo-auth>

<todo-data location="[[firebaseURL]]"
           todos="{{todos}}"
           user="{{user}}">
</todo-data>
..........

May I know why user is always printed out as undefined in ready()? It seems that when ready() is called, the bounded data is not yet populated with the correct data. When can i reliably know when a bounded data has been initialised?

Upvotes: 0

Views: 297

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

When ready() is called this only means that Polymer is done creating and initializing the elements. The call to Firebase is only just invoked at that time and Polymer doesn't wait for the call to the Firebase server to respond. This is done by code in <firebase-collection> Polymer is not aware of.

When data arrives from the server it is passed to fbTodos

Create a property fbTodos and and observer that is executed when fbTodos changes. This observer will be called when the data arrive.

properties: {

fbTodos: {
  observer: '_dataArrvied'
},

user: {
  observer: '_userChanged'
},

The <firebase-collection> element doesn't provide an firebase-value event therefore 

on-firebase-value="_firebaseLoaded"

seems redundant.

I haven't used this element myself yet.

Upvotes: 1

Related Questions