Data binding on JavaScript HTMLElement property in Polymer

Question

Making an SPA using Polymer, and I need my custom components to all use a common custom component which represents my backend API and is responsible of GET-ting/POST-ing data from/to the API. It also serves as a "cache" and holds the data to display. This way, all the components that have access to this single element will share the same data.

So what I want to do is this... :

<my-api
  users="{{users}}"
  products="{{products}}">
</my-api>

...but programmatically, as <my-api> is not declared in all of my components but once in the top one and then passed down through the hierachy by JavaScript:

Polymer({
  is: 'my-component',
  properties: {
    api: {
      observer: '_onApiChanged',
      type: HTMLElement
    },
    products: {
       type: Array
    },
    users: {
       type: Array
    }
  },
  _onApiChanged: function(newVal, oldVal) {
    if (oldVal)
      oldVal.removeEventListener('users-changed', this._onDataChanged);

    // Listen for data changes
    newVal.addEventListener('users-changed', this._onDataChanged);

    // Forward API object to children
    this.$.child1.api = newVal;
    this.$.child2.api = newVal;
    ...
  },
  _onDataChanged: function() {
    this.users = this.api.users; // DOESN'T WORK as 'this' === <my-api>
    this.products = this.api.products; // Plus I'd have to repeat for every array
  }
});

Does Polymer offers a built-in way to do this ? Can I create a double curly braces binding programmatically ?

Why do you need to pass the API element down instead of just values from it? — zacharytamas
@zacharytamas Because for example let's say component1 does only need to listen for products and not users, but one of its sub-components subcomponent1 needs both, then I still have to declare a users property in component1 in order to be able to pass it down to subcomponent1. Which means I have to declare all data arrays in almost each component, which makes maintaining very complicated whenever I add new data types, plus it's very verbose. — flawyte

zacharytamas zacharytamas · Accepted Answer · 2016-04-28T15:03:59

I would likely architect this slightly differently: passing down the products/users arrays declaratively taking advantage of Polymer's binding system. Or you could write your my-api element in such a way that they all share state and the first declared one is the primary while future declared ones are replicas. This would let you declare them wherever you need them and bind to the values via Polymer's normal ways.

But to answer your question, there's currently no way to easily programmatically setup the same kind of binding without using private Polymer APIs.

To avoid repeating as much and for the binding issue you were having you could use Polymer's built-in listen and unlisten methods:

Polymer({
  is: 'my-component',
  properties: {
    api: {
      observer: '_onApiChanged',
      type: HTMLElement
    },
    products: {
       type: Array
    },
    users: {
       type: Array
    }
  },
  _onApiChanged: function(newVal, oldVal) {
    var apiProperties = ['users', 'products'];

    if (oldVal) {
      apiProperties.forEach(function(prop) {
        this.unlisten(oldVal, prop + '-changed', '_onDataChanged');
      });
    }

    // Listen for data changes
    apiProperties.forEach(function(prop) {
      this.listen(newVal, prop + '-changed', '_onDataChanged');
    });

    // Forward API object to children
    this.$.child1.api = newVal;
    this.$.child2.api = newVal;
    ...
  },
  _onDataChanged: function() {
    this.users = this.api.users; // `this` should be the element now
    this.products = this.api.products;
  }
});

Given how this is a common pattern you're doing, you could probably get a lot of benefit out of extracting some of these things into a Behavior that abstracts away the binding/unbinding and API element forwarding.

Another optimization you may could make work would be to to look at the event passed to _onDataChanged to see if you can infer which value changed and update your corresponding property. This could prevent you needing to add a line for every property.

Data binding on JavaScript HTMLElement property in Polymer

2 Answers