Ember 1.11.0-beta "A block may only be used inside an HTML element or another block" error

Question

I'm trying to load some remote templates using 1.11 beta 4 and am running into an error when ember-template-compiler tried to compile the template. It throws the "A block may only be used inside an HTML element or another block" exception. I am compiling the template with:

var compiledTemplate = Ember.Handlebars.compile(templateText);

Has anyone seen this before? The template is:

<p{{#id}} id="{{id}}"{{/id}} data-name="{{name}}" class="flag {{#alert}}{{type}} {{type}}-input{{/alert}} {{styleClass}}{{^alert}} hide{{/alert}}">
  <span{{#id}} id="{{alertSevId}}"{{/id}} class="alertSeverity icon">
    {{#alert}}{{type}}{{/alert}}
  </span>
  <span{{#id}} id="{{alertMsgId}}"{{/id}} class="alertMessage">
    {{#alert}}{{message}}{{/alert}}
  </span>
</p>

Answer 1

I am learning Ember and I was stuck on the same error message today, "Error: A block may only be used inside an HTML element or another block."

I am using Ember v1.10, however.

I was working through a tutorial, and commented out a portion of my HTML so I could try something else:

<script type="text/x-handlebars" data-template-name="logs">
    <section>
        <ul>
            {{#each log in model}}
            <li>{{log.name}}</li>
            {{/each}}
        </ul>

       <!--<ul>-->
       <!--{{#each dev in controller}}-->
       <!--<li>{{dev}}</li>-->
       <!--{{/each}}-->
       <!--</ul>-->
       <!--<button {{action "clickMe"}}Click me!</button>-->
       <!--<p>{{renderedOn}}</p>-->
    </section>
</script>

When I attempted to view the new changes nothing was displaying. I was convinced it was because of the new unordered list I added or maybe changes I made to my JavaScript, but the source of my error was the commented out HTML. I removed it and everything functioned as expected.

I tinkered around with this situation some more and I observed:

• If I commented it out the portion of code with a block statement, instead of a line comment works as expected
• If I left the first line of commented out code and removed the others, it works as expected

So then, through the process of elimination I found the culprit was commenting out the each helper:

   <!--{{#each dev in controller}}-->
   <!--{{/each}}-->

I know this is not quite the same setup as yours, but hopefully it can point you in the right direction for solving your problem.