How can I bind a boolean attribute in Polymer?

Question

I'm asking this question, because these questions couldn't properly answer it:

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

I have this element. In short, what it does is that it reflects a "logged-in" attribute if the user is logged-in, and does not set it if the user is not authenticated.

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

The question is, how can I read the "logged-in" attribute?

For example:

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

What I've also tried from both questions:

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

None of this works. Notifier is working flawlessly. What am I missing?

Answer 1

You need to use {{}} braces for <my-oauth>'s logged-in property as you need two way databinding to export the value outside of my-oauth.

ALSO you need to have the loggedIn property inside my-oauth to notify: true so the outside world is informed of changes to it.

You don't need to reflect to attribute or use the $ sign, as databinding like this will work without reflecting to attribute, and obviously its an additional overhead to serialize the value.