Question

火花-图表
节点列表

我的目标是渲染一个由REST API中的数据备份的迷你图表列表。

现在我遇到的问题是，在nodes的每次迭代中，所有的迷你图表值都设置为实际迭代的值。但这仅适用于history绑定而不是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

Mustache绑定始终引用模型对象上的属性（聚合物元素中的默认模型对象是元素本身）。因此，在这种情况下，history引用this.history，这是一个属性，并且将不断被各种ajax调用覆盖。

解决此问题的一种方法是使用每个history node，如下所示：

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

聚合物核心-ajax重用绑定吗？

1 个答案: