CODEWITHSUNDEEP
polymerweb-component
Matt Clarkson
Matt Clarkson

Reputation: 14416

Add API to Polymer web component

I am building a Polymer web component that should respond to mouse/touch events. I would like to bind the on-tap="{{$.myElement.show}}" where show is a function in the element:

show: function(e) {
  // Do something with the event here
}

Is there anyway to define a public API in Polymer. The route I am going at the moment is to have attributes="event" on the element then the parent element has on-tap="{{updateEvent}}":

updateEvent: function(e) {
  this.$.myElement.event = e;
}

The element then just has:

eventChanged: function() {
  show(this.event);
}

Which just seems boilerplaty (think that is a made up word). Can I add the show function to the element prototype somehow?

Upvotes: 0

Views: 528

Answers (1)

ebidel
ebidel

Reputation: 24109

If show() is a method on your element, just use on-tap="{{show}}". show() is part of the element's public APi.

But it looks like you want is to call another element's method? This came up recently in a pull request: https://github.com/Polymer/polymer-dev/pull/30

What you have with setting this.$.myElement.event = e; and using eventChanged() in myElement works. You can also just call the element's method directly:

updateEvent: function(e) {
  this.$.myElement.show();
}

Here are a few other ways: http://jsbin.com/guyiritu/1/edit

Upvotes: 3

Related Questions