私は単純な<firebase-query>タグを持っています<dom-repeat>.. たとえば、いくつかのフィールドをリンクに変換し、いくつかの日付も解析する必要があります。
そのため、準備ができたらデータを取得し、各項目をループして、値の一部を変更する必要があります。
そのために、データの準備ができたときにそれを検出するオブザーバーを用意しました。ただし、その JavaScript 関数からデータをループする方法がわかりません。アイテムは存在しますが、何らかの理由でfor(var i in items)機能しません。
コンポーネントは次のとおりです。
<dom-module id="cool-stuff">
<template>
<firebase-query id="query" path="/items" data="{{items}}"></firebase-query>
<template is="dom-repeat" items="{{items}}" as="item">
[[item.name]]<br />
[[item.date]]<br />
</template>
</template>
<script>
Polymer({
is: 'ix-table',
properties: {
items: {type: Object, observer: "_itemsChanged"},
}
itemsChanged: function(data) {
// how do I loop through the data received from firebase-query?
console.log(data);
}
});
</script>
</dom-module>
理想的には、オブザーバー関数でやりたいことは次のようなものです。
for(var i in data) {
obj = data[i];
obj.name = '<a href="/item/"+obj.key>'+ojb.name+'</a>';
}
しかし、データをループできないようです。
オブザーバー関数内では、次のconsole.log(data)ような奇妙なものを返します。
Array[o]
0: Object (which contains a proper item)
1: Object (same)
2: Object (same)
アップデート：
これは、console.log(data) が返す内容のスクリーンショットです (オブザーバー内から):
配列にはすべてのオブジェクトが取り込まれているように見えますが、Array[0] として表示されます。したがって、それらをループすることはできません。
更新 2:
alfost のおかげで、解決策は次のとおりです。
<script>
Polymer({
is: 'ix-table',
properties: {
items: {type: Object},
}
observers: [
'_itemsChanged(items.splices)'
],
_itemsChanged: function(changeRecord) {
if (changeRecord) {
changeRecord.indexSplices.forEach(function(s) {
for (var i=0; i<s.addedCount; i++) {
var index = s.index + i;
var item = s.object[index];
console.log('Item ' + item.name + ' added at index ' + index);
// do whatever needed with the item here:
this.items[index].name = "New name";
}
}, this);
}
},
});
</script>
