EmberJS with jquery.steps dynamic content

I am having difficulty trying to figure out how to jquery.steps working with EmberJS when I need to change the content depending on the answers to each wizard question. For example, I have created a wizard and depending on what option you choose on the first screen of the wizard, the rest of the steps will be added based on that answer. The problem is that $.steps takes a content file as an argument to add a wizard step. My particular content item file will have Handlebars actions in it which will be called on the wizard controller. I am not sure how to load in the hbs file because it needs to be compiled. Here is my wizard component:

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement: function () {
    this._super();
    this._refresh();

  },
  _refresh: function () {
    Ember.run.next(this, function () {
      this.$().steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true
      });
      //How do I get the compiled handlebars template?
      this.$().steps("add", {title: "Creation Method", contentUrl: "app/wizard/creationMethod.hbs"});
    });
  },

  actions: {
    addStep: function (step) {
      this.$().steps("add", step);
    }
  }


});

Creation method HBS file looks like:

<h3>Creation Method</h3>
<section>
<div class="radio">
  <label>
    <input type="radio" name="creationMethod" value="hand" {{action 'addByHandSelected'}}/> By Hand
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="creationMethod" value="setupSheet" {{action 'setupSheetSelected'}} /> Use
    Setup Sheet
  </label>
</div>


</section>