How to make Ember templates work with Rails? Error: `SCRIPT` tags are not allowed in HTMLBars templates

Question

I'm trying out Ember for Rails to make a search page through this video: https://www.youtube.com/watch?v=Brn_2bbr0fE

I set up Ember using this railscast: https://www.youtube.com/watch?v=NRWMsMTY8rw

However, I get an error:

Compiler said: Error: `SCRIPT` tags are not allowed in HTMLBars templates

My application.handlebars is:

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

{{render "autocomplete"}}

<script type="text/x-handlebars" data-template-name="autocomplete">
    {{input value=searchText placeholder="Search.."}}
    <ul>
        {{#each searchResuls}}
        <li>{{this}}</li>
        {{/each}}
    </ul>
</script>

I don't know how Ember templates work. Some demos have .html, .handlebars, .hbs. How do I separate data-template-name="autocomplete"? I tried putting it on a helper but it doesn't work

It's worth noting that video is very out of date in the Ember world. Ember 1.0.0-rc3 came out in early 2013. I suggest reading through the current Ember guides to get a good idea of how to use the current versions of Ember. — GJK

GJK GJK · Accepted Answer · 2016-02-20T19:03:46

In Ember there are two main ways to declare templates:

Using a separate template file. This file likely has a .handlebars or .hbs extension (as you mentioned). When you do this it's know as precompiling your templates. (If you're using Ember CLI, this is mostly taken care of for you. If you're not using Ember CLI, you have to set up this process yourself.) When you precompile templates, you do not need to declare them in a script tag.
Using a script tag with the type attribute set to text/x-handlebars. Using this method, your templates are compiled to Javascript in the user's browser. In most versions, Ember will automatically detect these templates and put them where they need to be. If you use this method, your template script tags must be in your main HTML file (likely index.html).

What you have currently is a combination of both methods. Because you have an application.handlebars file, you must have your precompiler set up.You're going to want to continue using method 1. To do that, simply take the content of your script tag and put it in an autocomplete.handlebars file.

<!-- application.handlebars -->

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

{{render "autocomplete"}}

&

<!-- autocomplete.handlebars -->

{{input value=searchText placeholder="Search.."}}
<ul>
    {{#each searchResuls}}
    <li>{{this}}</li>
    {{/each}}
</ul>

That will fix your issue and Ember will detect your autocomplete template properly.

How to make Ember templates work with Rails? Error: `SCRIPT` tags are not allowed in HTMLBars templates

1 Answers