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

【问题标题】：How can I bind a boolean attribute in Polymer?如何在 Polymer 中绑定布尔属性？
【发布时间】：2016-10-04 15:41:53
【问题描述】：

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

In Polymer 1.0 how can I databind to a boolean property of an element?

Polymer 1.x: How to data bind to a variable boolean attribute?

How to bind paper-toggle-button to a Boolean in Polymer

我有这个元素。简而言之，它的作用是在用户登录时反映“登录”属性，如果用户未通过身份验证，则不设置它。

<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>

问题是，如何读取“登录”属性？

例如：

<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>

这些都不起作用。通知程序工作正常。我错过了什么？

【问题讨论】：

标签： data-binding polymer

【解决方案1】：

您需要为<my-oauth> 的logged-in 属性使用{{}} 大括号，因为您需要两种方式的数据绑定来将值导出到my-oauth 之外。

您还需要将loggedIn 属性包含在my-oauth 到notify: true 中，以便外界知道它的变化。

您不需要反射到属性或使用 $ 符号，因为这样的数据绑定无需反射到属性就可以工作，而且显然它是序列化值的额外开销。

【讨论】：

谢谢。我尝试将通知设置为 true，但该元素没有绑定它。事实上，如果我在控制台中执行 document.querySelector，我可以看到花括号 {{}} 没有映射到任何东西。
等等！我知道了！你是对的。因此，每当您将 notify 属性设置为 true 时，Polymer 将执行 name-of-attr="true"，因此您只需执行 name-of-attr="{{myBind}}"。天哪，非常感谢。

【解决方案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>

如您所见，如果您没有通知 true，这将不起作用！！！

【讨论】：