Last Updated: February 25, 2016
·
553
· bbarr

Always preventDefault with RivetsJS

Avoid mucking up your controller/view/viewModel/etc with DOM-business by asking RivetsJS to preventDefault for you.

Just add this to your rivets configuration:

rivets.binders['with-default-on-*'] = rivets.binders['on-*']

rivets.binders['on-*'] = {
  "function": true,
  routine: function(el, value) {
    rivets.binders['with-default-on-*'].routine.call(this, el, function(e) {
      e.preventDefault(); 
      value.call(this, e); 
    });
  }
}

This will now silently preventDefault, allowing your view logic to be un-DOM-ified:

<button data-on-click="myHandler"></button>

And in the case that you want native functionality in addition to your callback:

<button data-with-default-on-click=myHandler"></button>