Question

我的第一篇文章和我的第一个聚合物应用程序，所以我感谢您的耐心等待。我正在使用纸张标签和铁页来封装两个通过相同的铁-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"/>';}

        };

    });
    },


  });

聚合物 - 在单独的纸张标签中的两个vaadin网格 - 填充选择

0 个答案: