Question

我正在尝试制作一个聚合物元素，用于针对SMF论坛对用户进行身份验证。我希望元素公开一个“user”属性，该属性最初将是一个空对象{}但是如果/当元素发出了ajax请求并且能够对用户进行身份验证时，该对象将包含有关用户的详细信息（以及身份验证令牌），用于应用程序的其余部分。应用程序的其余部分位于元素的内容部分，仅在进行身份验证时显示。

因此，应用程序的结构如下

<smf-auth login="login/url", fail="fail/url", splash="initial/splash/img" user>
rest of application which will need access to user
</smf-auth>

我发布了具有反射属性的用户，并将其初始值设置为{}。但是当我运行单元测试时，我运行javascript来获取元素（作为javascript变量）并查看el.user并且它具有值“”（即空白字符串）。我尝试更改代码以初始化用户更复杂的东西，但我仍然得到一个空白字符串。

这是元素定义（使用我更复杂的用户）

<polymer-element name="smf-auth" attributes="login fail splash">
  <template>
    <core-ajax id="req" url="{{login}}" handleAs="json" on-core-response="{{handleResponse}}"></core-ajax>
    <img id="splash" src="{{splash}}"/>
    <template if="{{autheticated}}">
      <content></content>
    </template>

  </template>

  <script>
  Polymer('smf-auth',{
    publish:{
      user:{
        value:{token:{},uid:0,name:''},
        reflect:true
      }
    },
    created:function(){
      this.authenticated = false;
    },
    attached:function(){
      this.$.req.go();
    },
    handleResponse:function(response){
      //TODO decide what the response is
    }
  });
  </script>
</polymer-element>

那么我应该如何声明和使用“user”属性，以便元素的内容（更多聚合物元素）可以访问它

Answer 1

在实例化 smf-auth 元素时，需要指定绑定到用户属性的数据。然后你可以在元素体内访问这个属性：

<smf-auth user="{{user}}" ...>
  Hello {{user.name}}!
</smf-auth>

这假设您的 smf-auth 元素本身位于Polymer元素中。否则你需要一个auto-binding template element。

如果您的元素层次结构较深，并且您需要底部元素中的 user 对象，则将 user 属性传递给层次结构可能会出现问题。在这种情况下，另一个选项可能是使用core-signals并在用户登录时发送事件。然后，内部元素可以侦听此事件并从事件详细信息中获取用户对象。

混淆了Polymer属性反射和双向数据绑定之间的区别

1 个答案: