Appending ember.js view leaves <script> tags that make it invisible

Question

I'm dynamically creating an ember.js view using a templateName returned via a AJAX request:

[{"templateName":"ember/templates/questions/goal/goalType"}]

and adds it as an Ember view to a list element like so:

attachQuestionView: function() {

  if (this.questionView != null) {
    this.questionView.remove();
  }

  this.questionView = Ember.View.create({
    templateName: Azul.questionCarouselController.get("current").templateName
  });

  this.questionView.appendTo('#question_li');
},

Which seems to work almost perfectly. It pulls in the template for the current question and appends it to the list element but leaves the handlebars script tags around it, which renders it invisible per the user agent style:

<li id="question_li">
    <div id="ember398" class="ember-view">
    </div>
    <div id="ember424" class="ember-view">
      <script type="text/x-handlebars">
         <div id="ember448" class="ember-view">
           <div class="btn-group" data-toggle="buttons-radio">
             <a href="#" class="btn" data-bindAttr-8="8" data-ember-action="9">Option A</a>
             <a href="#" class="btn active" data-bindAttr-10="10" data-ember-action="11">Option B</a>
           </div>
         </div>
      </script>
   </div>
</li>

What am I doing wrong?

Could you please provide a little bit more code? (the template returned by AJAX call, and the way you store it on client side) — Mike Aski
sorry - it doesn't return the template but the templateName of a template that is predelivered with the rest of the ember app. I'll add that data structure. — outside2344

Roy Daniels Roy Daniels · Accepted Answer · 2012-04-19T23:14:01

What does the actual template look like (templates/questions/goal/goalType.handlebars)? It looks like what you are doing is correct enough, so it leaves me to believe that you have the script tag in your .handlebars file, which you should not do.

You only need <script type="text/x-handlebars"></script> if you are defining the template directly in your HTML file.

Appending ember.js view leaves <script> tags that make it invisible

1 Answers