Do I have to force notify change when firebase-query data are not directly exposed (in deeper level of JSON)?

Question

I have some data in a 3-level structure in firebase. I can get the data and extract what I want easily using firebase-query element of Polymerfire. But if I change data in the third layer, nothing happens when I expect my iron-list to reflect that as I'm taking advantage of data-binding feature of Polymer.

I have other instances which work fine where my query path is the immediate level where I'm changing the data and all works fine.

I came accross this thread , it seem as if firebase-query has this issue. I'm wondering if it is solved, if not, would appreciate showing me an easy way to only get the changes, currently I'm going the path that is shown in the link and it's quite messy. Thanks.

"I have removed what's not related to make it easy to read"

Here's my data structure :

{
  "ky42sqEauWW0MMqEJaidCAI7Fcl1" : {
    "499248079923499248138779" : {
         
      "data" : "someValue",        //this is what I need to be notified about when it changes
    },
    "499248079923499248138755" : {
      "data" : "someOtherValue",
    }
  }
}

and here's where I bind my data to iron-list :

<!all the imports and headers ... >
  <head>

  </head>
  <body>

  <dom-module id="test-page">
    <template>
      <style>
     </style>

     <firebase-query
            id="myQuery"
            app-name="test"
            path="/myPath/here"
            log=true      
            data="{{myData}}">
          </firebase-query>
          
     <app-header-layout has-scrolling-region style="top: 10px; width: 100%; min-height: 400px;">  
        <iron-list id="ironList" items="[[myData]]" as="myItem">
          <template>            

          <some stuff goes here that need to change when data is updated after change>

          </template>
        </iron-list>
      </app-header-layout>


  <script>

    HTMLImports.whenReady(function() {
      Polymer({
        is: 'test-page',
        properties: {
          items: {
            type: Array
          },
          user: String,

          uid: String,     

          myData: {
            type: Array,
            notify: true,
            observer: '_itemsChanged',
          },
        },  
      
        //got this from the link above
        observers: [
             '_itemsChange(schedData.*)'
        ],

        _itemsChange: function(schedData) {
          console.log('my items changed: ', schedData);
        },
        
        //the polymerfire gives something like this as an example but 
       //I can't get it to actually work without getting my hands dirty trying to extract only the changed data

        _itemsChanged: function(newData, oldData) { 
          console.log("old new data" , newData , oldData); 
        },

    
      });
    });
       
  </script>
</dom-module>

<setting-page></setting-page>

</body>
</html>

Do I have to force notify change when firebase-query data are not directly exposed (in deeper level of JSON)?

0 Answers0