CODEWITHSUNDEEP
ember.jshandlebars.js
outside2344
outside2344

Reputation: 2115

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

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?

Upvotes: 0

Views: 890

Answers (1)

Roy Daniels
Roy Daniels

Reputation: 6309

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.

Upvotes: 2

Related Questions