firebase - polymer 和 polymer 火 : how to loop through the data from an observer?

Question

我有一个简单的<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:

感谢arfost，这里是解决方案:

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

Answer 1

<firebase-query>结果

请注意<firebase-query>结果是一个对象数组。假设您的数据库在 /notes/<USER_ID>/ 下包含以下项目:

您的<firebase-query>看起来类似于:

<firebase-query
    id="query"
    app-name="notes"
    path="/notes/[[user.uid]]"
    data="{{notes}}">
</firebase-query>

(其中 user 绑定(bind)到 <firebase-auth>.user )。

假设用户已登录，<firebase-query>然后将填充其 data属性(即绑定(bind)到 notes )具有以下数组:

注意每个对象如何包含 $key属性，它对应于 Firebase 控制台的数据库 View 中看到的项目的键。

然后您可以迭代notes直接与 <dom-repeat> :

<template is="dom-repeat" items="[[notes]]">
  <li>
    <div>key: [[item.$key]]</div>
    <div>body: [[item.body]]</div>
    <div>title: [[item.title]]</div>
  </li>
</template>

绑定(bind)到 HTML 字符串

您应该知道，在这种情况下，字符串数据绑定(bind)是按字面呈现的，因此尝试设置 name至obj.name = '<a href="...">'将渲染文字字符串而不是 anchor 。相反，您应该在模板中声明标签，并绑定(bind) key和name这些标签内的属性。因此，您的观察者可以替换为:

<template is="dom-repeat" items="{{items}}" as="item">
  <a href$="/item/[[item.key]]">[[item.name]]</a><br />
  [[item.date]]<br />
</template>

迭代数组

仅当您希望在显示数据之前更改数据时，以下注释才有意义...

迭代数组时，您应该 avoid for..in 因为它不保证迭代的顺序，并且因为它可能会迭代您可能不一定关心的可枚举属性。相反，您可以使用 for..of (假设您的应用程序可以使用 ES6):

for (let note of notes) {
  note.title += ' ...';
}

或 Array.prototype.forEach() :

notes.forEach(function(note) {
  note.title += ' ...';
});