Error! : Listener method not defined

[Himali Kiran]

I am getting following error.

[firebase-login::_createEventHandler]: listener method `{{login}}` not defined

Actual Code:

<dom-module id="firebase-login">

  <style>

    :host {

      display: block;

    }

  </style>

  <firebase-auth id="baseLogin" user="{{user}}" statusKnown="{{statusKnown}}" 

  location="https://himalikiran.firebaseio.com" provider="github" on-login="{{onLogin}}" 

  on-error="{{onLoginError}}"></firebase-auth>

  <template>

    <paper-menu-button>

            <paper-icon-button icon="social:person" class="dropdown-trigger"></paper-icon-button>

              <paper-menu class="dropdown-content">

                  <paper-item on-tap="{{login}}" hidden?="{{!statusKnown || user}}">Login</paper-item>

                  <paper-item on-tap="{{logout}}" hidden?="{{!statusKnown || !user}}">Logout</paper-item>

              </paper-menu>

    </paper-menu-button>

  </template>

  <template if="{{user}}">{{user.github.username}}</template>

</dom-module>

<script>

(function() {

  Polymer({

    is: 'firebase-login',

    properties: {

      

    },

    

    login : function(){

      console.log('working');

      this.$.baseLogin.login();

    },

    logout : function() {

      this.$.baseLogin.logout();

    }

  });

})();

</script>

[Daniel Freedman]

Polymer 1.0 event handlers don't use the curly brace syntax. Just on-login="onLogin" and all the others as well.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/7c418074-23f8-4405-bef5-88ac9a23dd44%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Himali Kiran]

Thank you so much,

But if I remove curly braces it gives another error:

Uncaught TypeError: Cannot read property 'login' of undefined

I made following changes:

 <firebase-auth id="baseLogin" user="{{user}}" statusKnown="{{statusKnown}}" 

  location="https://himalikiran.firebaseio.com" provider="github" on-login="onLogin" 

  on-error="onLoginError"></firebase-auth>

  <template>

    <paper-menu-button>

            <paper-icon-button icon="social:person" class="dropdown-trigger"></paper-icon-button>

              <paper-menu class="dropdown-content">

                  <paper-item on-tap="login" hidden?="{{!statusKnown || user}}">Login</paper-item>

                  <paper-item on-tap="logout" hidden?="{{!statusKnown || !user}}">Logout</paper-item>

              </paper-menu>

    </paper-menu-button>

  </template>

[Daniel Freedman]

Looks like your firebase element is not in the template, and therefore won't be in this.$

[Himali Kiran]

I have included firebase and firebase-auth elements in the document, and also installed inside bower_components folder. Firebase login demo from https://github.com/Polymer/firebase-element/blob/master/demos/login.html runs well in the same environment.

<link rel="import" href="../bower_components/firebase-element/firebase.html">

<link rel="import" href="../bower_components/firebase-element/firebase-auth.html">

[Daniel Freedman]

OK, but this.$.baseLogin is missing because the firebase-auth element is not in the template of firebase-login, so it will be undefined. You either have to put the firebase-auth element in the template, or make a direct variable reference to the firebase-auth element for the event handlers.

[Himali Kiran]

You are amazing :)

It was so small thing, I didn't notice.

I put firebase-auth element inside template and it worked.

Thank you so much.

:)