Does polymer core-ajax reuse bindings?

Question

I created two polymer elements: http://jsbin.com/vusere/1

1. sparkline-chart
2. node-list

My goal is to render a list of sparkline charts backed up by data out of a REST API.

Now I've got the problem that on each iteration over nodes all sparkline-chart values are set to those of the actual iteration. But this only occures for the history binding and not the node.id binding.

Do I miss a point here?

node-list

<polymer-element name="node-list">
  <template>
    <core-ajax
      auto
      url="http://demonstrator.herokuapp.com/nodes"
      handleAs="json"
      response="{{nodes}}"></core-ajax>
    <template repeat="{{node in nodes}}">
      <core-ajax
        auto
        url="http://demonstrator.herokuapp.com/node/{{node.id}}/hist_bandwidth"
        handleAs="json"
        response="{{history}}"></core-ajax>
      <sparkline-chart values="{{history | filterHistory}}"></sparkline-chart>
      <h4>{{history | filterHistory}}</h4>
      <h4>{{node.id}}</h4>
    </template>
  </template>

  <script>
    Polymer('node-list', {
      filterHistory: function (data) {
        if (data) {
          return _(data.histBandwidth.data).pluck('bandwidth').last(20).valueOf();
        }
      }
    });
  </script>
</polymer-element>

sparkline-chart

<polymer-element name="sparkline-chart" attributes="values width">
<template>
    <span id="values">{{values}}</span>
    <h4>{{values}}</h4>
</template>

<script>
    Polymer('sparkline-chart', {
        width: 100,

        created: function () {
            this.values = [0];
        },

        domReady: function () {
            $(this.$.values).peity('line', { width: this.width, fill: 'none' });
        },

        valuesChanged: function () {
            $(this.$.values).change();
        }
    });
</script>
</polymer-element>

Answer 1

Mustache bindings always refer to a property on a model object (the default model object in a polymer element is the element itself). So, in this case history refers to this.history , which is a single property, and will be constantly overwritten by the various ajax calls.

One way to fix this is by using a history per node like so:

<core-ajax
  auto
  url="http://demonstrator.herokuapp.com/node/{{node.id}}/hist_bandwidth"
  handleAs="json"
  response="{{node.history}}"></core-ajax>
<sparkline-chart values="{{node.history | filterHistory}}"></sparkline-chart>