re-evaluating an object binding when a sub property changes

Question

I am attempting to wrap a data provider in a custom element in order to utilize the mediator pattern in my application, but I'm a little confused about this behavior I'm running into.

Here's a shortened version of my data provider:

<dom-module id="archive-data">
  <script>
  (function () {
    //some helper functions 
    //...  
    var api = {
      is: 'archive-data',
      properties: {
        archive: {
          type: Object,
          value: { 
            name: value,
            ...,
            meetings: [] 
          },
          notify: true
        }
      },
      ready: function () { this.update(); },
      update: function () {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == XMLHttpRequest.DONE) {
            var data = HELPERS.extractResult(xhr.response);
            this.archive.meetings = someFunction(data);
          }
        }.bind(this);
        xhr.open("POST", "serverAPI.cfc?method=getData");
        xhr.send();
      }
    };
    Polymer(api);
  }());
  </script>
</dom-module>

The Idea is that this thing is going to request some data from the back end asynchronously. Later, if the application makes a change to the Database, the mediator can call update() on this provider and any elements that have bindings on archive will get the updates.

So the mediator could use the provider like:

<archive-data archive="{{archive}}"></archive-data> 
<other-element my-data="[[archive]]"></other-element>

---

The issue I'm running into is that the data binding isn't working. I'm wondering why. From what I can tell, the docs say it should work:

Two-way data-binding and observation of paths in Polymer is achieved using a similar strategy to the one described above for 2-way property binding :

When a sub-property of a property configured with type: Object changes, an element fires a non-bubbling <property>-changed DOM event with a detail.path value indicating the path on the object that changed.

Elements that have registered interest in that object (either via binding or change handler) may then take the appropriate action.

Finally, those elements will forward the notification on to any children they have bound the object to, and will also fire a new <property>-changed event where property is the root object, to notify any hosts that may have bound root object down.

I tried: this.set('archive.meetings', someFunction(data)); instead of direct assignment, but that didn't work.

I also tried running: this.fire('archive-changed'); directly after the assignment, but that didn't work either!

However, If I replace the entire archive object with a new one, the binding recomputes as expected. e.g. this.archive = { meetings: someFunction(data) };

Answer 1

I think it is necessary to notify Polymer that your path has change, like so :

this.notifyPath('archive.meetings', this.archive.meetings);

Here is a full example from that official documentation :

<dom-module id="custom-element">
  <template>
    <div>{{user.manager.name}}</div>
  </template>

  <script>
    Polymer({
      is: 'custom-element',
      reassignManager: function(newManager) {
        this.user.manager = newManager;
        // Notification required for binding to update!
        this.notifyPath('user.manager', this.user.manager);
      }
    });
  </script>

</dom-module>