поместите переменную firestore в полимерный шаблон - PullRequest
Новая
       4

поместите переменную firestore в полимерный шаблон

0 голосов
/ 29 мая 2018

Может быть, я слишком обдумываю это, но не могу найти способ поместить результаты запроса Firestore в шаблон Polymer 3.Например: 

class MyPage extends PolymerElement {

    constructor() {
        super();

        /* somehow set this.users to the firestore users query results */

    }

    static get properties() {

        return {
            users: {
                type: String
            }
        }

    }

    static get template() {
        return html`<div>[[users]]</div>`;
    }
}

Используя следующий код, который работает правильно и печатает на консоль: 

var all_users;

const setsRef = firestore.collection("users");

setsRef.get().then(function(querySnapshot) {

    var users = [];

    querySnapshot.forEach(function(doc) {
        users.push(doc.data().verb);
    });

    all_users = users.join(", ");

    console.log("All users: ", all_users);

    /* run a function here that sets this.users = all_users */

})
.catch(function(error) {
    console.log("Error getting documents: ", error);
});

Проблема в том, что мне нужно запустить функцию из результатов Firestoreв то время как другой является конструктором объекта.Я бы предпочел, чтобы все мои запросы Firebase были во внешнем js-файле, но этот асинхронный мыслительный процесс сбивает меня с толку.

1 Ответ

0 голосов
/ 29 мая 2018

Используйте один из методов жизненного цикла для загрузки пользователей:

https://www.polymer -project.org / 3.0 / docs / devguide / custom-elements # element-lifecycle 

class MyPage extends PolymerElement {
    constructor() {
        super();
        this.users = []
    }

    static get properties() {
        return {
            users: {
                type: String
            }
        }

    }

    static get template() {
        return html`<div>[[users]]</div>`;
    }

    async ready() {
      super.ready()
      try {
        const querySnapshot = await firestore.collection("users").get()
        this.users = querySnapshot.map(doc => doc.data().verb).join(", "); 
      } catch (error) {
        console.log(error)
      }
    }
}

Если вы не хотите использовать один из методов жизненного цикла, вы можете запустить собственное событие, которое ваш элемент MyPage может прослушивать: https://www.polymer -project.org / 3.0/ docs / devguide / events # custom-events

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

...