Handlers disappearing when you hide the template

[jlebrech]

I have a template for when the user is logged in and for when the user is logged out, I have a core-ajax component in the template for the login inputs i order to do the login call.

the issue is when the template hides and is displayed (when clicking logout) that the handler won't call anymore.

I found a fix which was to move core-ajax up a level so that it's not affected by the template-if, but could this issue exist with other element which are seen that have to be in a template block?

<polymer-element name="login" attributes="session">
  <template>
    <app-globals id='globals'></app-globals>

    <template if="{{session == null}}">
      <input value='{{username}}'/>
      <input type='password' value='{{password}}'/>
      <button on-click='{{login}}'>Login</button>

      <core-ajax id='ajaxlogin' url="{{url}}" handleAs="json" on-core-response='{{handleResponse}}'></core-ajax>
    </template>

    <template if="{{session != null}}">
      <button on-click='{{logout}}'>Logout</button>
    </template>

  </template>
  <script>
    Polymer('login', {
      login: function() {
        this.url = this.$.globals.LOGIN_URL + '?username=' + this.username + '&password=' +  this.password;

        // no auto because logout can retrigger ajax
        var ajax = this.$.ajaxlogin;
        ajax.go();
      },
      logout: function(){
        localStorage.removeItem('session');
        this.session = null;
      },
      handleResponse: function(event, response) {
        this.session = response.response.session;
        localStorage['session'] = this.session;
      }
   });
  </script>
</polymer-element>

also should I just not use core-ajax to access my api and write a service instead (planning on it when the code base gets bigger)

[sorvell]

Polymer currently does not support using automatic node finding (this.$.ajaxlogin) for dynamically created elements. In this case, it works initially because session starts out null and the ajaxlogin element is initially available.

You can correct this in a couple of ways: (1) find the ajaxlogin element in the login method, (2) avoid the problem by simply hiding/showing the 2 ui's instead of using template if which actually regenerates the elements.

var ajax = this.shadowRoot.getElementById('ajaxlogin');

Here's a working jsbin:

http://jsbin.com/sadag/1/edit