Javascript 聚合物-在单独的纸张选项卡中有两个瓦丁网格-填充在“选择”

我的第一篇文章和我的第一个聚合物应用程序，所以我感谢你的耐心。我使用纸张标签和铁皮页来封装两个vaadin网格，它们通过相同的iron ajax设置填充，参数略有不同。我的守则如下：

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

男人{{category}{{weap}
妇女{{category}{{weap}
.
.
.           
.
.
.           

目前，正如您可能看到的，我正在使用一个ajax调用来同时填充男性和女性数据——这似乎效率不高，而且在我开始排序时会很痛苦。元素ajaxapi具有双向绑定，用于形成ironajax调用的参数并返回数据。我想在选择选项卡时单独加载数据。为了使事情复杂化，我还使用网格列渲染器来重新设置一些数据的样式。我想让selection更改绑定的性别属性将触发我的ajax元素，所以我的问题是如何做到这一点，以及如何确保我的网格列渲染器函数引用正确的网格

编辑： 我想也许我应该添加聚合物函数的内容，看看这是否有助于某人构建响应

<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"/>';}

        };

    });
    },


  });

聚合物({
是：“我的排名1”，
特性：{
sortColumn:{
类型：字符串，
值：“点数”，
},
排序方向：字符串，
sortProperty:字符串
},
就绪：函数（）{
var grid=此值。$.mens；
此参数为0；
grid.addEventListener（'sort-order-changed'，function（）{
如果（网格大小>0）{
grid.scrollToStart（）；
var sortOrder=grid.sortOrder[0]；
this.sortColumn=grid.columns[sortOrder.column].name；
警报（this.sortColumn）；
grid.refreshItems（）；
}
}.约束（这个）；
然后（函数（）{
//为索引列添加渲染器
grid.columns[0]。渲染器=函数（单元格）{
cell.element.innerHTML=cell.row.index+1；
};
grid.columns[6]。渲染器=函数（单元格）{
if（cell.data<0）{
cell.element.innerHTML=Math.abs（cell.data）+''；
}
否则如果（cell.data>0）{
cell.element.innerHTML=cell.data+''；
}
else{cell.element.innerHTML=''；}
};
});
},
});