Dom-If not refreshing after variable changes - polymer

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