聚合物核心-ajax是否可以重用綁定？

Question

我創建了兩個聚合物元素： http : //jsbin.com/vusere/1

1. 迷你圖
2. 節點列表

我的目標是呈現由數據通過REST API備份的迷你圖圖表列表。

現在我有一個問題，在nodes上的每次迭代中，所有迷你圖的值都設置為實際迭代的值。 但這僅在history綁定中發生，而在node.id綁定中不node.id 。

我在這里想念點嗎？

節點列表

<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>

迷你圖

<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

胡子綁定始終引用模型對象上的屬性（聚合物元素中的默認模型對象是元素本身）。 因此，在這種情況下， history引用this.history ，它是單個屬性，並且會被各種ajax調用不斷覆蓋。

解決此問題的一種方法是使用每個node的history ，如下所示：

<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>