Question about custom bindings and registerEventHandler

[frontend_dev]

Hello,

I hope this question isn't too stupid ;)

So what I want is to attach a tooltip to certain DOM Elements. What I used until now is something like this:

<span class="icon help" data-bind="event: { mouseover: view.ttShow.bind(props.userEmail) }"></span>

... calling a function on my View class which in turn opens the tooltip. But with every Viewclass needing this function this gets very tedious, plus the binding syntax is a bit verbose I think.

So instead I want to use something like this:

<span class="icon help" data-bind="tooltip: props.userEmail"></span>

And I already wrote a custom binding that looks like this:

ko.bindingHandlers.tooltip = {
  init: function (element, valueAccessor, allBindingsAccessor) {
      function showTooltip(event) {
         tooltip.show(valueAccessor(), event, { orientation: ["right", "bottom", "top", "left"]});
      }
      ko.utils.registerEventHandler(element, "mouseover", showTooltip);
  }
};

And that seems to work great! But I have two worries with this, so it would be very nice if someone could enlighten me!

1) Memory leaks

Since I havent found a "unRegisterEventHandler" function, how is this event being cleaned up when I get rid of the DOM Element?

I already call ko.removeNode(this.view); when I remove my views, is this enough? Since it's a single page app, memory leaks are to be avoided at all costs.

2) Performance

Does this custom binding method have any (significant) performance implications in contrast to the method I used until now?


Thanks for help!

[Michael Best]

When elements are removed from the view and you clear all references to them from your code, the garbage collector clears the elements and any event handlers. In old versions of IE, this may not happen, and so Knockout automatically removes the event handlers when you call ko.removeNode in those browsers.

-- Michael

[frontend_dev]

Thanks Michael for the quick reply!

So you think I am good to go with my custom binding? And does it have any performance implications in contrast to doing it in a more direct way? Am also asking because  applying bindings seems to be the bottleneck #1 in my app, so I'd like to prevent more strain on that process.

[Michael Best]

I think that the custom binding is more efficient than using the event binding because the binding itself is simpler and faster for Knockout to parse.

-- Michael