CODEWITHSUNDEEP
javascripttemplateseventsbindpolymer
yathern
yathern

Reputation: 329

Polymer binding tap to an object method

I'm trying to bind a method to an on-tap attribute of a paper-button. After much testing, I've found that I can only bind a (for lack of a better word) top-level function, and not a method of an object in the template.

For example, I have a template, to which I have bound a number of objects, one of which is a user object. Object user has a bunch of methods and variables, like 'isNew' or 'reputation'. The user object also has a method 'addReputation'

I can use the object variables like this :

       <template if = '{{user.new}}'><h1>{{user.name}}</h1></template>

And I can bind button taps like this:

      <paper-button on-tap='{{addReputation}}'>Add Rep</paper-button>

But not like this:

      <paper-button on-tap='{{user.addReputation}}'>Add Rep</paper-button>

Does anyone know why this may be?

Upvotes: 0

Views: 794

Answers (2)

Adhikari Himanshu
Adhikari Himanshu

Reputation: 11

i'm sharing my plunk to resolve above problem. plunk link

In the template

<button on-tap="{{fncall}}" data-fnname="b">b call</button>

In the script

x.fncall = function(e) {
    var target = e.target;
    var fnName = target.getAttribute("data-fnname");
    return x.datamodel[fnName]();
}

Polymer(x);

Upvotes: 0

ebidel
ebidel

Reputation: 24109

if you set the method to a handler on your element's prototype it works. That way you can still keep things dynamic:

<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

<polymer-element name="my-element" on-tap="{{tapHandler}}">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    click me
    <content></content>
  </template>
  <script>
    Polymer({
      created: function() {
       this.user = {
         method: function() {
           alert('hi');
          }
        };
        this.tapHandler = this.user.method;
      }
    });
  </script>
</polymer-element>

<my-element></my-element>

Upvotes: 1

Related Questions