Custom element data binding and promises/lazy loading?

207 views

Skip to first unread message

kman...@gmail.com

unread,

Dec 4, 2014, 5:43:29 AM12/4/14

to polym...@googlegroups.com

I'm trying to extend the firebase-element to enable wrapping "arrays" as a javascript list, as per: https://github.com/katowulf/Firebase.getAsArray

I have the following element, firebase-list which extends firebase-element.

<link rel="import" href="../../bower_components/firebase-element/firebase-element.html">

<script src="firebase-as-array.js"></script>
<polymer-element name="firebase-list" attributes="list" extends="firebase-element">
  <script>
    (function () {
      'use strict';


      Polymer({
        list: null,
        attachedCallback: function() {
          console.log(this.location);
          this.locationChanged();
          console.log(this.ref);
          this.list = Firebase.getAsArray(this.ref);
        }
      });


    })();
  </script>
</polymer-element>

My problem/question is, how do I manage setting `this.list` properly, as it is done async?

My index.html just renders and doesn't update the list... ah, I guess I have to set an observer on `_list` and then set my published list property when ready?

<body unresolved>
  <h1>Hello World</h1>
  <template is="auto-binding">
    <firebase-list location="https://owjo5nyx9dj.firebaseio-demo.com" list="{{list}}"></firebase-list>
    <h1>List</h1>
    {{list}}
    <template repeat="{{item in list}}">
      <li>{{item.name}}</li>
    </template>


  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

Thanks or any tips on best practice for handling this. Cheers!

kman...@gmail.com

unread,

Dec 4, 2014, 5:46:41 AM12/4/14

to polym...@googlegroups.com, kman...@gmail.com

Turns out the solution was simply to set up an onChanged for ref :)

<polymer-element name="firebase-list" attributes="list" extends="firebase-element">
  <script>
    (function () {
      'use strict';


      Polymer({


        refChanged: function() {


          console.log(this.ref);
          this.list = Firebase.getAsArray(this.ref);
        }
      });


    })();
  </script>
</polymer-element>