Is there any way to dynamically add a Handlebars variable to a comment in an Ember JS .hbs template?

Been learning EmberJS via EmberCLI this past week and things have been going well. I’ve now started to add my own HTML taxonomy and CSS to some test projects and it’s been quite rewarding seeing these dynamic Handlebars templates come to life with my own content.

Anyway, one thing I like to do when I am creating my own static HTML/CSS setups is to add a closing comment DIVs so it’s easier to keep track of what the heck is happening. For example, a DIV with a class FooBar might be structured like this:

<div class="FooBar"></div><!-- .FooBar -->

I’d like to retain that <!-- .FooBar --> appended to the DIV closing tag when I move things into all phases of development—sandbox, development, staging and production—for debugging purposes. So I have my EmberHS Handlebars component template setup something like this:

<div class="{{class}}"></div><!-- .{{class}} -->

The issue I’m having now is while the <div class="{{class}}"> properly gets the FooBar value thus making it <div class="FooBar">, the closing </div><!-- .{{class}} --> renders with the Handlebars template placeholder in place so it looks like this:

<div class="FooBar"></div><!-- .{{class}} -->

I assume that EmberJS or Handlebars is skipping the comment area (<!-- -->) since it is a comment area, but is there any way I can retain that comment with the class being dynamically added to the comment? Or is this a lost cause?