Dom-If not refreshing after variable changes

Question

I have this problem where, in a page from the polymer starter kit I set a variable to true, but a Dom-if created in the main app isn't re-rendered, though if I display the variable in plain, it changes.

Here's the code of the dom-if:

<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
   </app-location>

   <app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}">
   </app-route>

   <app-drawer-layout fullbleed="" narrow="{{narrow}}">
     <!-- Drawer content -->
     <template is=dom-if if='{{isLoggedIn}}'>
     <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
       <app-toolbar class="menu">Menu</app-toolbar>
       <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
         <a class="textMenu" name="view1" href="[[rootPath]]view1">3Deseos</a>
         <a class="textMenu" name="login" href="[[rootPath]]login">Regalar</a>
         <a class="textMenu" name="view3" href="[[rootPath]]view3">Mi Perfil</a>
       </iron-selector>
       <img class="fondoDeTres" src="./images/background.png">
     </app-drawer>
     </template>

     <template is=dom-if if='{{!isLoggedIn}}'>
     <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
       <app-toolbar class="menu">Menu</app-toolbar>
       <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
         <a class="textMenu" name="view1" href="[[rootPath]]view1">3Deseos</a>
         <a class="textMenu" name="login" href="[[rootPath]]login">Ingresar</a>
       </iron-selector>
       <img class="fondoDeTres" src="./images/background.png">
     </app-drawer>
     </template>

and here it's the code of the boolean (I even tried adding an observer, but it doesn't work):

   isLoggedIn: {
     type: Boolean,
     value: false,
     notify: true,
     observer: '_loginStatusChanged'
   }

here it's the observer:

   _loginStatusChanged(status){
     this.isLoggedIn=status;
     console.log("Cambio el Login a "+status);
   }

and the script that modifies it:

  submit(){
      console.log("requestSent");
      var xhr = new XMLHttpRequest();
      var url = "http://localhost:3000/api/login";
      var request = {
        username : this.username,
        password : this.password
      }
      var that=this;
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
              var reply = JSON.parse(xhr.responseText);
              console.log(reply);
              that.set('isLoggedIn', reply);
              console.log(that.isLoggedIn);
          }
      };
      var data = JSON.stringify({request});
      xhr.send(data);
  }

Any tips? Thanks in advance!

Answer 1

I solve this with iron-localstorage. I don't know if it's the best way, but ITS WORKING! :D