Firebase-query data binding

[JGSolutions]

Description

Data binding not working in firebase-query when implementing as component. I need to use firebase-query in different components and using polymer-cli to lazyload the components. If I use firebase-document I will get data.

Expected outcome

An array of the data set from the data attribute.

Actual outcome

No results and empty array.

Live Demo

http://jsbin.com/xixirarile/edit?html,output

Steps to reproduce

Took a screenshot of my console log.

Browsers Affected

Any browser.

[Geoffrey-Pliez]

same issue for me

[JGSolutions]

Any ideas or is anyone planning to look into this issue for the polymer fire team?

The firebase-element worked perfectly. I understand polymerfire component is fairly new development but please any help on this?

[tjmonsi]

@JGSolutions: did you put an attribute name on your firebase-app at the root?

[tjmonsi]

Ahh wait... now i understand.

@JGSolutions: you have to understand that having this...

items: {
          type: Array,
          notify: true,
          observer: '_itemsChange'
        }

will not work because you are observing the changes in the whole item property and NOT in the item elements. I had this problem before only to find out that when I printed each element inside a dom-repeat template makes it work...

what you need to do is this:

properties: {
        items: {
          type: Array,
          notify: true,
        }
      },

      observers: [
           '_itemsChange(items.splices)'
      ]

      _itemsChange: function(items) {
        console.log('items: ', items);
      }

That's the only time you can see that any time you add inside the path: /business/cuigipizza/products/cat1 an item is added into the array items via the notifySplices inside the firebase-query (actually via this.push)

You can see how it works and why it works that way here: https://www.polymer-project.org/1.0/docs/devguide/properties#array-mutation

Hope it helps

[JGSolutions]

Ok yes makes sense. But reading the documentation well kind of hard to pick this up: https://elements.polymer-project.org/elements/polymerfire?active=firebase-query

I added the dom-repeat template and yes I see the results.

This ticket can be close but maybe the examples should be better for less confusion.

Thanks for the help!

[tjmonsi]

Yep it really is a bit hard to pick it up. It took me a lot of racking my brains out and experiments just to arrive with the same conclusion :stuck_out_tongue:

Anyway, you're welcome :smile:

[DanielTurnerItalic]

I got stuck on this one for a few hours the other day too, it would be good if the observer functioned the same as firebase-document. As below.

items: { type: Array, notify: true, observer: '_itemsChange' }

Either that or as everyone states the documentation is really lacking, it would be great if it was updated.

[tjmonsi]

_itemsChange are really called but only once when created.. After that, all changes in the elements in the array will not be observed unless used this:

observers: [
  '_itemsElementsChanged(items.splices)'
]

On Fri, 9 Sep 2016 07:18 DanielTurnerItalic, notifications@github.com wrote:

I got stuck on this one for a few hours the other day too, it would be good if the observer functioned the same as firebase-document. As below. items: { type: Array, notify: true, observer: '_itemsChange' } Either that or as everyone states the documentation is really lacking, it would be great if it was updated.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/firebase/polymerfire/issues/67#issuecomment-245771725, or mute the thread https://github.com/notifications/unsubscribe-auth/AChe1vcr-zny9rPierkjg9qRl4kTA2uwks5qoJepgaJpZM4JEsZN .

[DanielTurnerItalic]

Are you saying there is no way that the firebase-query will ever behave in the same manner as the firebase-document? As in after the items are fully loaded from firebase the observer is triggered?

Right now the observer works for me but I found it confusing that it doesn't work in the same manner since the polymer-fire documentation doesn't clearly state that it behaves differently. Generally if you are using a dom-repeat template it doesn't matter, but if you are doing further manipulation of the data you might get stuck.

[tjmonsi]

Yes. So any child_added event called will not call the _itemsChange function. One hack is to just refire the items-changed (cant remember the property fire event).

On Fri, 9 Sep 2016 08:45 DanielTurnerItalic, notifications@github.com wrote:

Are you saying there is no way that the firebase-query will ever behave in the same manner as the firebase-document? As in after the items are fully loaded from firebase the observer is triggered?

Right now the observer works for me but I found it confusing that it doesn't work in the same manner since the polymer-fire documentation doesn't clearly state that it behaves differently. Generally if you are using a dom-repeat template it doesn't matter, but if you are doing further manipulation of the data you might get stuck.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/firebase/polymerfire/issues/67#issuecomment-245786729, or mute the thread https://github.com/notifications/unsubscribe-auth/AChe1m_TyfLOhJmJ9vpe120nOioTz4t7ks5qoKw1gaJpZM4JEsZN .

[DanielTurnerItalic]

Thanks. Ok, so then consider this another vote for better documentation on the firebase query.

[Thkasis]

Hi , I'm dealing with a similar issue as well. firebase-query doesn't seem to notify the binded data about the changes when the changes happen in levels deeper than the immediate one where the path is directed to. Would appreciate if anyone can update me on the current status, is this solved? if yes, where can I find more info on it, if not, any solution but the one above? Although, it is a good one, it's just quite annoying to go though my data to extract what I want (only the change) and also not so efficient. Thanks a lot anyways