Javascript polymer core ajax是否重用绑定?
我创造了两种聚合物元素:Javascript polymer core ajax是否重用绑定?,javascript,ajax,polymer,Javascript,Ajax,Polymer,我创造了两种聚合物元素: 闪光图 节点列表 我的目标是呈现一个由RESTAPI中的数据备份的迷你图列表 现在我遇到了一个问题,在节点上的每次迭代中,所有的迷你图值都设置为实际迭代的值。但是这只发生在历史绑定中,而不是节点.id绑定中 我有没有漏掉一点 节点列表 <polymer-element name="node-list"> <template> <core-ajax auto url="http://demonstrator
节点上的每次迭代中,所有的迷你图值都设置为实际迭代的值。但是这只发生在历史
绑定中,而不是节点.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>
{{历史|过滤历史}
{{node.id}
聚合物(‘节点列表’{
过滤器历史记录:功能(数据){
如果(数据){
返回(data.histBandwidth.data).pull('bandwidth').last(20).valueOf();
}
}
});
迷你图
<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>
{{values}}
{{values}}
聚合物(“迷你图”{
宽度:100,
已创建:函数(){
这个值为[0];
},
domReady:函数(){
$(this.$.values).peity('line',{width:this.width,fill:'none'});
},
值更改:函数(){
$(this.$.values).change();
}
});
胡须绑定始终引用模型对象上的属性(聚合元素中的默认模型对象是元素本身)。因此,在本例中,history
指的是this.history
,它是一个单独的属性,并且会不断被各种ajax调用覆盖
解决此问题的一种方法是使用历史
每个节点
如下所示:
<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>