Polymer и Polymerfire: как просмотреть данные от наблюдателя?

Думаю, я столкнулся с той же проблемой, что и вы.

Это происходит из-за того, как запрос firebase получает массив, как работают наблюдатели полимеров, и скрывается тем фактом, что консоль javascript основана на ссылке, когда она показывает объекты.

На самом деле здесь происходит то, что запрос firebase создает пустой массив, который запускает ваш наблюдатель за полимерами.

Итак, ваша функция вызывается, как только массив создается, но по-прежнему пуст, и вы не можете выполнять итерацию, поскольку он пуст. Затем вы регистрируете его, где под-свойства примитивов отображаются правильно (массив [0])

Затем firebase начинает заполнять массив данными. Ссылка на массивы остается прежней, поэтому полимер больше не запускает наблюдателя, а в консоли, когда он пытается отобразить массив, он отображает массив, указанный в журнале, который теперь содержит данные.

Я рекомендую вам использовать наблюдатель мутации массива вместо вашего простого, как показано ниже.

`properties: {
    items: {type: Object},
  },
,
observers: [
       '_itemsChanged(items.splices)'
],`

Он будет срабатывать каждый раз, когда объект будет добавлен в ваш массив, и вы сможете выполнять необходимую работу :)

У меня была ссылка на документацию по наблюдателю мутации массива :) полимер наблюдатель мутации массива

Надеюсь, это решит вашу проблему, удачного дня.

<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 привязан к <firebase-auth>.user).

Предполагая, что пользователь вошел в систему, <firebase-query> затем заполнит свое свойство data (т. Е. Привязанное к notes) следующим массивом:

Обратите внимание, как каждый объект содержит свойство $key, которое соответствует ключу элемента, отображаемому в представлении База данных консоли Firebase.

Затем вы можете выполнить итерацию 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>

Привязка к строкам HTML

Вы должны знать, что привязки строковых данных в этом случае отображаются буквально, поэтому попытка установить name в obj.name = '<a href="...">' приведет к отображению буквальной строки вместо привязки. Вместо этого вы должны объявить теги в своем шаблоне и связать свойства key и name внутри этих тегов. Итак, вашего наблюдателя можно заменить следующим:

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

Итерация массива

Следующее примечание актуально только в том случае, если вы предпочитаете изменить данные перед их отображением ...

При итерации массива вы должны избегайте for..in, потому что он не гарантирует порядок итерации и потому, что он может перебирать перечисляемые свойства, которые могут вас не беспокоить. Вместо этого вы можете использовать _21 _ (при условии, что ES6 доступен вашему приложению):

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

или Array.prototype.forEach():

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

Я не думаю, что могу придумать сценарий, в котором вам нужно будет изменить данные, перебирая массив, а не просто используя вычисленные привязки. нравится:

<template is="dom-repeat" items="{{items}}" as="item">
  <child-el date="{{_computeDate(item.date)}}"></child-el><br />
  <child-el attr1="{{_someOtherConversion(item.prop1)}}"></child-el><br />
  <child-el attr2="{{_iPromiseAnyConversionCanBeDoneLikeThis(item.prop2)}}"></child-el><br />
</template>
<script>
  _computeDate: function(item) {
    //do date converstion
}