CODEWITHSUNDEEP
data-bindingpolymerpolymer-1.0skygear
Fung
Fung

Reputation: 970

Data-binding with child's child element in Polymer

I am using Skygear as a BaaS. I created a polymer element skygear-app (just like polymerfire do) to init the skygear instance.

  <skygear-app name="skygear" app={{skygear}} end-
  point="https://xyz.skygeario.com/" api-key="SECRET"></skygear-app>

I could also successfully do the login by 

  passwordSignIn: function(){
    skygear.loginWithEmail(this.email, this.password).then(
      function(){
        console.log('login ok');
        console.log(skygear.currentUser.id);
        this.currentUser = skygear.currentUser;
      }
    );

I could get the userId by console.log(skygear.currentUser.id);, however, I couldn't get the userId using data-binding {{skygear.currentUser.id}}.

  <h4>Access Token: [[skygear.accessToken]]</h4> <!-- working -->
  <h4>User Id: [[skygear.currentUser.id]]</h4> <!-- not working -->

Level 1 attribute like {{skygear.endpoint}} works; but Level 2 attribute like {{skygear.currentUser.id}} don't.

Is data-binding limited to 1 level only? And any idea to solve?

Upvotes: 1

Views: 89

Answers (1)

Rick Mak
Rick Mak

Reputation: 414

According to the polymer1.0 doc, level 2 attribute is Unobservable changes, refs: https://www.polymer-project.org/1.0/docs/devguide/data-system#unobservable-changes

We can use onUserChanged provided by skygear container to notify polymer app.

Here is the minimal working Polymer skygear-app

  Polymer({
    is: 'skygear-app',
      apiKey: {
        type: String
      },
      endPoint: {
        type: String
      },
      app: {
        type: Object,
        notify: true,
        computed: '__computeApp(name, apiKey, endPoint)'
      }
    },
    __computeApp: function(name, apiKey, endPoint) {
      if (apiKey && endPoint) {
        skygear.onUserChanged(() => {
          this.notifyPath('app.currentUser.id');
        });
        skygear.config({
          apiKey: apiKey,
          endPoint: endPoint
        }).then(() => {
          this.notifyPath('app.currentUser.id');
        });
        return skygear
      } else {
        return null;
      }

      return skygear
    }
  });

Upvotes: 1

Related Questions