聚合物中与子元素的数据绑定

Question

我正在使用Skygear作为BaaS。我创建了一个聚合物元素skygear-app (就像polymerfire一样)来初始化skygear实例。

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

我还可以通过以下方式成功登录：

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

我可以通过console.log(skygear.currentUser.id);获取userId，但是无法使用数据绑定{{skygear.currentUser.id}}获取userId。

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

像{{skygear.endpoint}}这样的1级属性可以工作；但像{{skygear.currentUser.id}}这样的2级属性不能。

数据绑定是否仅限于1级？有什么想法要解决吗？

Answer 1

根据聚合1.0文档，二级属性为Unobservable changes，refs：https://www.polymer-project.org/1.0/docs/devguide/data-system#unobservable-changes

我们可以使用skygear容器提供的onUserChanged来通知聚合物app。

这里是最小的工作聚合物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
    }
  });