我的第一篇文章和我的第一个聚合物应用，所以我感谢你的耐心等待我正在使用纸张标签和铁页来封装两个通过相同的铁-ajax设置填充的vaadin网格 - 稍微不同的参数 . 我的代码如下：
<ajax-api
data="{{apidata}}"
sortby="{{sortColumn}}"
gender="{{gen}}"
cat="{{category}}"
weapon="{{weap}}">
</ajax-api>
<paper-tabs selected="{{selected}}" sticky>
<paper-tab>Mens {{category}} {{weap}}</paper-tab>
<paper-tab>Womens {{category}} {{weap}}</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<div>
<vaadin-grid id="mens" items="[[apidata.mens]]" visible-rows = 15 >
<table>
<colgroup>
<col name="rank" />
.
.
.
<col name="cat" hidable="" hidden="" />
</colgroup>
</table>
</vaadin-grid>
</div>
<div>
<vaadin-grid id="womens" items="[[apidata.womens]]" visible-rows = 15>
<table>
<colgroup>
<col name="rank" />
.
.
.
<col name="cat" hidable="" hidden="" />
</colgroup>
</table>
</vaadin-grid>
</div>
目前您可能会看到我正在使用一个ajax调用来同时填充男性和女性数据 - 看起来效率太高并且在我开始排序时很痛苦 . 元素ajax-api具有双向绑定，形成iron-ajax调用的参数并返回数据 . 我想在选择选项卡时单独加载数据 . 更复杂的是，我还使用网格列渲染器来重新设置一些数据的样式 . 我正在考虑选择更改绑定的性别属性将触发我的ajax元素所以我的问题是我该怎么做以及如何确保我的网格列渲染器功能引用正确的网格 .
编辑：我想也许我应该添加Polymer函数的内容，看看是否有助于某人构建响应 .
<script>
Polymer({
is: 'my-rankings1',
properties: {
sortColumn: {
type: String,
value: "points",
},
sortDirection: String,
sortProperty: String
},
ready: function() {
var grid = this.$.mens;
this.selected = 0;
grid.addEventListener('sort-order-changed', function() {
if (grid.size > 0) {
grid.scrollToStart();
var sortOrder = grid.sortOrder[0];
this.sortColumn = grid.columns[sortOrder.column].name;
alert(this.sortColumn);
grid.refreshItems();
}
}.bind(this));
grid.then(function() {
// Add a renderer for the index column
grid.columns[0].renderer = function(cell) {
cell.element.innerHTML = cell.row.index +1;
};
grid.columns[6].renderer = function(cell) {
if (cell.data < 0){
cell.element.innerHTML = Math.abs(cell.data) + '<iron-icon icon="arrow-downward" style="color: red"/>';
}
else if (cell.data > 0) {
cell.element.innerHTML = cell.data + '<iron-icon icon="arrow-upward" style="color: green"/>';
}
else {cell.element.innerHTML = '<iron-icon icon="settings-ethernet" style="color: #ffcc00"/>';}
};
});
},
});