3

我的第一篇文章和我的第一个聚合物应用程序，感谢您的耐心等待。我正在使用纸张标签和铁页来包围两个通过相同的铁阿贾克斯设置填充的 vaadin-grids - 参数略有不同。我的代码如下：

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

        };

    });
    },


  });

4

0 回答 0