Simple Blaze debug trick

blaze
1

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
2

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
3

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.

4

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

5

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: