bootstrap carousel not working, impacted by ember metamorph identifiers

Here's a newbie question for you

my stack: mongodb, node, ember, bootstrap i am using ember-tools to help with structuring

I have a bootstrap carousel that I am trying to dynamically populate from the database. The database is accessed through a restful API and loaded into the the front-end ember model in the route.

model: function() {
  return $.getJSON('/headliners');
}

the model follows the following schema:

{
    id:1, 
    active:true, 
    title:"This is a title", 
    description:"and a short description", 
    buttontext: "Learn More", 
    buttonurl: "http://www.blah.com", 
    imageurl:"/images/apicture.jpg"
}

if the active attribute is true, then the class should be "item active". if false, then the class should = "item". here is the template code that tries to make this happen

{{#each model}}

    {{#if active}}          
        <div class="item active">   
    {{else}}
        <div class="item">
    {{/if}}

    <img {{bindAttr src="imageurl"}} />
    <div class="container">
      <div class="carousel-caption">
        <h1>{{title}}</h1>
        <p>{{description}}</p>
        <p><a class="btn btn-lg btn-primary" {{bindAttr href="buttonurl"}}">{{buttontext}}</a></p>
      </div>
    </div>
  </div>
{{/each}}  

This template works as expected, but includes metamorph identifiers which are causing some problems. (if i remove the metamorph identifiers, the page renders correctly)

more specifically, the issue i am having is that the metamorph identifiers used to handle the (#if)(else) are impacting the carousel object.

I am pretty sure there is a common way to handle this situation- what is the best approach to modifying the class if the active attribute is true but removing the metamorph identifiers so the carousel view is not impacted?