0

I have a FAQ page that reads a Firebase node and lists all the Q & A contents using the below lines of code:

<firebase-auth  id="fbLogin" provider="anonymous" location="https://XXX.firebaseio.com"></firebase-auth>

<firebase-collection orderByPriority log id="fbFAQ" location="https://XXX.firebaseio.com/faq" data="{{faqs}}"></firebase-collection>

 <template is="dom-repeat" items="[[faqs]]" as="faq">
    <div class="forBorder">
            <akyral-details id="[[faq.__firebaseKey__]]">
                 <akyral-summary>[[faq.q]]</akyral-summary>
                 <p class="answer">[[faq.a]]</p>
            </akyral-details>
    </div>  
</template>

I have a link from mainpage to the FAQ page and upon click it works perfect! However when I go back to main page and then click again for FAQ link the page renders nothing. But if i refresh the page then its fine.

To recreate do the following:

  1. Open https://sizzling-fire-7471.firebaseapp.com/ and click the FAQ page link at bottom . You will see a list of Q & A
  2. Then click left arrow on top to go back to main page
  3. Now click FAQ link again and you will not see anything,but in the console you will see it fetching data. Also, refreshing the page makes it okay
DevAtPolydeals.com
  • 86
  • 2
  • 6
  • **Note to people of future:** With help of @zikes i was able to solve the issue. It was related to app-router. For some reason app-router was not stamping the contents on the page with firebase-element the second time it imports it. Removed app-router and it worked out all good. – DevAtPolydeals.com Jul 03 '15 at 04:48
  • **Note to people of future part 2**: I tried it with more-routing and i am getting the same results. I am guessing it has nothing to do with app-router. Side note: more-routing does not lazy load your page, not worth it! – DevAtPolydeals.com Jul 09 '15 at 01:36
  • **Note to people of future part 3**: The issue is due to the fact that firebase events are fired before the element dom is ready. So the rendering does not happen. – DevAtPolydeals.com Jul 09 '15 at 18:12
  • **Note to people of future part 4**: After spending more than 10 days on the issue. The conclusion is that firebase-element does not work well with routers when the route is dispatched the second time. – DevAtPolydeals.com Jul 17 '15 at 23:50

2 Answers2

0

I bet it's a race condition. The firebase-auth and firebase-collection are firing at the same time, causing it to try to fetch the collection before it's authorized. Try wrapping firebase-collection in <template is="dom-if" if="{{fbUser}}"> so it doesn't get stamped until the auth is completed.

Zikes
  • 5,888
  • 1
  • 30
  • 44
  • Hi @zikes..your conclusion is right .. it is race condition. I tried your solution but no luck :( . I also tried adding this.$.fbLogin.login(); in the ready function to make sure it gets logged in as soon as page is loaded but no luck :( – .... is there anything else you think i can try? – DevAtPolydeals.com Jul 02 '15 at 20:47
  • I also tried changing the rule such that auth is no longer required and removed the auth element. I still get the same problem :( – DevAtPolydeals.com Jul 03 '15 at 03:01
0

This issue has now been resolved. It was due to a bug in firebase-collection. It was fixed at https://github.com/GoogleWebComponents/firebase-element/pull/42/files and will soon be merged.

DevAtPolydeals.com
  • 86
  • 2
  • 6