Simple Blaze debug trick

Just came up with this, and thought it was kind of cool for its simplicity. If you add this event to your top template, you can simply right-click on anything on the page and get its context!

Template.page.events({
   'contextmenu *':function(e){
      e.stopPropagation();
      console.log(this);
   }
});
13 Likes

Very cool! :clap: , but this is not exactly very reliable in there, so you can improve it using the actual template instance reference like so:

Template.page.events({
   'contextmenu *':function(e,t){
      e.stopPropagation();
      console.log('template instance:\n', t);
      console.log('data context:\n', Blaze.getData(e.currentTarget));
   }
});
8 Likes

Template instance doesn’t work with nested templates though, as it always returns the template that triggered it (the top template), not the template that contains the element you clicked.

But then is this not becoming confusing with interatees like {#each} ?

It behaves just as expected for me. If you click an item generated by {{#each}}, you get the context of that item.
The only issue I’ve found with this is if it’s a string, it shows as an object of the class String instead of a true string (weird). Blaze.getData fixes that, so that’s a good change :slight_smile: