Question

我问这个问题，因为这些问题无法正确回答：

我有这个元素。简而言之，它的作用是它反映了一个登录的＆＃34;如果用户已登录，则属性，如果未对用户进行身份验证，则不设置该属性。

<dom-module id="my-oauth">
  <template>

  </template>
  <script>


  (function() {
      'use strict';
       Polymer({
        is: 'my-oauth',
        ready : function() {
            this.verifyLogin();
        },
        properties : {
          loggedIn : {
            type : Boolean,
            reflectToAttribute: true,
            value : false
          }
        },
        observers : ['verifyLogin()'],
        verifyLogin: function () {

           var val = localStorage.getItem("token") === null
                || localStorage.getItem('token_expiration_time') == null
                || localStorage.getItem('token_type') == null
                || localStorage.getItem('token_expiration_created_date')  == null
                || !isTokenValid(localStorage.getItem('token_expiration_time'), 
                                 localStorage.getItem('token_expiration_created_date'))
                ? false : true;

            if (val) {
                this.setAttribute('logged-in',true);
            } else {
                this.removeAttribute('logged-in');
            }


        },
      logout : function() {
          localStorage.removeItem("token");
          console.log("Logged out!");
          this.verifyLogin();

      },
      storeLocal(token, expiration, tokenType, issued) {

          issued = typeof issued !== 'undefined' ? issued : Date.now();
          localStorage.setItem("token", token);
          localStorage.setItem("token_expiration_time", expiration);
          localStorage.setItem("token_type", tokenType);
          //The Time in which was set.
          localStorage.setItem("token_expiration_created_date", issued);
          this.verifyLogin();
      }
      });
    })();

  function receiveToken(token) {
      console.log("Token Received.");
      console.log(token);
  }


  </script>


</dom-module>

问题是，如何阅读＆＃34;登录＆＃34;属性？

例如：

<my-oauth logged-in$="[[authenticated]]"></my-oauth>

<template is="dom-if" if="[[!authenticated]]">
                <h1>User is not logged in</h1>
            </template>
            <template is="dom-if" if="[[authenticated]]">
                <h1>User has logged in</h1>
            </template>

我也从两个问题中尝试过：

<my-oauth id="js-ouath" {{loggedIn}}></my-oauth>
<template is="dom-if" if="{{!loggedIn}}">
                <h1>User is not logged in</h1>
            </template>
            <template is="dom-if" if="{{loggedIn}}">
                <h1>User has logged in</h1>
            </template>

这些都不起作用。 Notifier工作正常。我错过了什么？

Answer 1

您需要对<my-oauth>的已登录属性使用{{}}大括号，因为您需要双向数据绑定以将值导出到my-oauth之外。

您还需要在loggedIn到my-oauth内设置notify: true属性，以便外部世界了解其变化。

您不需要反映属性或使用$符号，因为像这样的数据绑定将在不反映属性的情况下工作，显然它是序列化值的额外开销。

Answer 2

akc42是对的。所以这就是你如何做到的：

<dom-module id="my-oauth">
  <template>  </template>
  <script>
  (function() {
      'use strict';
       Polymer({
        is: 'my-oauth',
        ready : function() {
            this.verifyLogin();
        },
        properties : {
          loggedIn : {
            type : Boolean,
            value : false,
             notify: true
          }
        },
  </script>
</dom-module>

然后在你的剧本中：

<my-oauth logged-in="{{mybind}}"> </my-oauth>

正如您所看到的那样无效如果您没有通知!!! \

如何在Polymer中绑定布尔属性？

2 个答案: