Polymer：如何将元素的属性绑定到promise数据？

Question

假设我有这个元素：

<dom-module id="my-element">
  <template>
    <auth-service is-authorized="{{isAuthorized}}"></auth-service>
  </template>

  <script>
    Polymer({
      is: 'my-element',

      properties: {
        isAuthorized: {
          type: Boolean,
          value: false
        }
      },

      ready: function () {
       if (this.isAuthorized) doStuff()
       else dontDoStuff()
      }
    })
  </script>
</dom-module>

这个孩子的auth-service元素：

<dom-module id="auth-service">
  <script>
    Polymer({
      is: 'auth-service',

      properties: {
        isAuthorized: {
          type: Boolean,
          value: false
        }
      },

      ready: function () {
        var self = this
        self.fetchAuthorization()
          .then(function () {
            self.set('isAuthorized', true)
          })
          .catch(function () {
            self.set('isAuthorized', false)
          })
      },

      fetchAuthorization: function () {
        //I know this is silly, but it's for the sake of the example
        if (!localStorage.authorization) return Promise.reject('Unauthorized')
        return Promise.resolve(JSON.parse(localStorage.authorization))
      }
    })
  </script>
</dom-module>

只有在auth-service的ready回调中的'fetchAuthorization'承诺得到解决后，我才能确保只调用my-element的ready回调？

Answer 1

将observer添加到isAuthorized属性。

<dom-module id="my-element">
  <template>
    <auth-service is-authorized="{{isAuthorized}}"></auth-service>
  </template>

  <script>
    Polymer({
      is: 'my-element',

      properties: {
        isAuthorized: {
          type: Boolean,
          value: false,
          observer: '_authorizationChanged'
        }
      },

      _authorizationChanged: function () {
       if (this.isAuthorized) doStuff()
       else dontDoStuff()
      }
    })
  </script>
</dom-module>