Odd EmberJS Precompile Error: Expecting 'ID', 'DATA', got 'INVALID'

Question

I'm building a very simple Ember-Rails example app and I'm running into an odd precompiler error. This is what the basics of the app looks like.

Here's the application_controller.js.coffee:

Hitch.ApplicationController = Ember.Controller.extend
    entries: ['asdfasf' , 'asfasdf']

    addEntry: ->
        @entries.pushObject name: @get('newEntryName')
        @set('newEntryName', "")

Here's the application.handlebars file:

<div id="container">
    <h1>My App</h1>

    {{ view Ember.TextField valueBinding="newEntryName" action="addEntry"}}
    {{ #each array}}
        <li></li>
    {{ /each }}
</div>

I'm getting a very odd error when I try to load the page:

Pre compilation failed for: <div id="container">
    <h1>My App</h1>
    {{ view Ember.TextField valueBinding="newEntryName" action="addEntry"}}
    {{ #each array}}
        <li></li>
    {{ /each }}

</div>

. Compiler said: Error: Parse error on line 4:
...on="addEntry"}}  {{ #each array}}        <li>
----------------------^
Expecting 'ID', 'DATA', got 'INVALID'
  (in /Users/danshipper/code/hitch/app/assets/javascripts/templates/application.handlebars)

I have no idea how to start debugging this, since I'm rather new to Ember. I looked through the Barber docs since it says that it's a Barber precompiler error but couldn't find anything. Anybody have any ideas?

Answer 1

As stated in the comment, removing the space in the Handlebars expression will help:

<div id="container">
    <h1>My App</h1>

    {{view Ember.TextField valueBinding="newEntryName" action="addEntry"}}
    {{#each array}}
        <li></li>
    {{/each }}
</div>

The exception seemed to me as if the precompiler did not expect a space at that position :-)