Polymer + Firebase (Polymerfire): <firebase-query> не работает в представлении одностраничного приложения (с <firebase-app>, расположенным в my-app.html)

Question

Я пытаюсь отправить данные в Firebase, используя Polymerfire и шаблон Polymer App Toolbox:

• my-app.html содержит настроенный <firebase-app> составная часть.
• my-models.html (это страница, настроенная в my-app.html маршруты) содержит <add-model> составная часть
• <add-model> это форма с <firebase-query>, <firebase-auth>, введите и нажмите кнопку отправки.

• Я пытаюсь выдвинуть данные, используя <firebase-query> со следующей функцией в add-model.htmlPolymer объект:

  Polymer({
      is: 'add-model',
      properties: {
          data: {
              type: Object
          }
      },
      create: function() {
         this.$.query.ref.push({
             name: this.$.myModelName.value
          });
      }
  });
  

  результат

• призвание push на <firebase-query> объект в add-model.html возвращается Cannot read property 'push' of undefined ( объяснено в этом Q / A, в нашем случае это потому, что <firebase-app> не представляется должным образом объявленным).

• перемещение <firebase-app> от my-app.html в add-model.html файл делает push функция работает, но потом my-app.html теряет свою функциональность Firebase.
• призвание <firebase-app> как в my-app.html, так и в add-model.html возвращает Uncaught Error: Firebase App named 'firebase-app' already exists.
• <firebase-auth> работает в add-model.html и возвращает [[user]] объект.

Как мне сделать firebase-query правильно общаться с firebase-app с моего маршрута?

Answer 1

TLDR: решение заключается в импорте polymerfire/polymerfire.html (даже если не все элементы, используемые в этом файле) в том же файле, что и ваш <firebase-app> декларация.

---

Ваш my-app.html вероятно импорт polymerfire/firebase-app.html (и никакой другой импорт из Polymerfire); а также my-models.html возможно только импорт polymerfire/firebase-query.html а также polymerfire/firebase-auth.html при условии, что это единственные элементы Polymerfire, используемые в этом файле.

Я определил причину (но не обязательно коренную причину). Симптомы проявляются, когда polymerfire.html не импортируется в тот же файл, что и объявление <firebase-app>,

polymerfire.html импортирует все элементы из Polymerfire, в том числе Polymer.FirebaseCommonBehavior, который определяет app свойство видно во всех элементах Polymerfire. Я предполагаю, что Firebase SDK требует, чтобы все элементы Polymerfire были импортированы ранее app инициализация для того, чтобы заполнить app возражать соответственно В противном случае, когда firebase-query инициализирует, app.database будет неопределенным, что предотвращает его ref свойство от инициализации, приводящее к ошибкам во время выполнения при попытке использовать методы элементов Polymerfire. В случае this.$.query.ref.push(...) увиденная ошибка будет:

Uncaught TypeError: Cannot read property 'push' of undefined

Answer 2

Для меня ключ должен был объявить firebase-app до объявления остальных веб-компонентов, которые имели firebase-query или же firebase-document внутри. Во время отладки я понял, что свойства firebase дочерних WebComponents были установлены до того, как они были объявлены в firebase-app сам элемент.

Это заказ, который работал для меня:

<firebase-app
    name='someName'
    auth-domain="xxx.firebaseapp.com"
    database-url="xxx.firebaseio.com/"
    api-key="my-api-key">
</firebase-app>

И все элементы, которые используют query или же document должен прийти только после этого:

<some-component>
...
   <firebase-document
       app-name='someName'
       id="query"
       path="/app/firstName"
       data="{{testFirstName}}">
   </firebase-document> 
...
</some-component>

Answer 3

Я нашел ответ выше, чтобы импортировать Polymirefire/ PolymerFire.html прямо на деньги. Кроме того, я хотел бы добавить, что мое конкретное приложение было очень суетливым относительно того, где именно расположен каждый элемент import и firebase. Большинство поликаст (например, № 58, на которые ссылаются выше) кажутся довольно простыми и их легко понять. В этом конкретном случае потребовалось много экспериментов с тем, где находились элементы и импорт, из-за области видимости или видимости, или из-за других проблем, которые я никогда не выяснил.

Надеюсь, что это поможет кому-то еще в той же ситуации, в которой я был.

Я бы также поспорил, что посетитель в 2018 году или позже сочтет это сообщение устаревшим, потому что к тому времени оно, вероятно, будет улучшено.