dynamically change on-tap attribute

Question

what i am trying to do is change the function that on-tap calls based on spa route. here is what i have tried (working inside a custom element)

this.$.menuButton.attr['on-tap'] = "{{newFunction}}";

also

this.$.menuButton.on-tap = "{{newFunction}}";

as well as many other attempts none have worked. how do i change the value on a attribute that contains a - in the name? if this isn't doable what would be the recommended method for changing the on-tap function dynamically?

Answer 1

If you want to go the declarative route, you can still use on-* handlers and data-binding to flip the handler:

<p on-tap="{{handler}}">Tap me to see what handler is set.</p>
<button on-click="{{setHandler}}" data-handler="oneHandler">Set Handler 1</button>

ready: function() {
  this.setHandler();
},
setHandler: function(e, detail, sender) {
  this.handler = !sender ? this.defaultHandler :  
                           this[sender.dataset.handler];
},
defaultHandler: function() {
  alert('default handler');
},
oneHandler: function() {
   alert('one handler');
}

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

Answer 2

Instead of the on-* declarative event mapping, you should be using event listeners.

this.addEventListener('tap', this.myFunction);
this.addEventListener('tap', this.newFunction);

It's basically the same thing. If you need (event, detail, sender) arguments, though, you have to pass them yourself.

API Reference