私の最初の投稿と私の最初のポリマー アプリなので、しばらくお待ちください。私は paper-tabs と iron-pages を使用して、同じ iron-ajax セットアップ (わずかに異なるパラメーター) を介して入力される 2 つの vaadin-grid を囲みます。私が持っているコードは次のとおりです。
<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>
現在、おそらくご覧のとおり、1 つの 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"/>';}
};
});
},
});