Referencing templates defined on the client-side using <script> tags


I’ve been building an Ember application using Rails and ember-cli-rails. It has been fantastic so far- however I’ve run into an annoying issue with template rendering.

I am using the carrierwave-direct gem to upload large files directly to S3. The gem includes a form helper which helps create the form with all of the keys and information for S3.

Because the form is complex, I decided to generate the form in the application.html.erb file then reference the resulting ‘template’ using a {{partial}} helper in the .hbs templates.

My application.html.erb looks something like this:

    <script type='text/html' data-template-name='direct-upload-form'><%= form_tag_helper......%></script>

The Ember app is an Ember CLI app (using ember-cli-rails) and I’ve created a direct-upload-form component whose template reads:

{{partial 'direct-upload-form' }}

However, upon page load I receive the error

Unable to find partial with name "direct-upload-form"

Now, I know that templates render server-side, but is there a way to have it reference a client-side template instead?


What version of Ember? You’ll need ember-template-compiler which is not included by default.

If adding that still does not work, I would put a breakpoint here: to see if it’s discovering your templates when htmlbars initializes.


@jasonmit I’m using Ember 1.13

As you advised I included the ember-template-compiler:

module.exports = function(defaults) {
    return app.toTree();

After I added the module I noticed that script tags with the attribute type='x-handlebars' disappeared completely! On top of that the compiler was still complaining about the missing template.

SOLUTION: as it turns out namespacing is very important for template resolution!

I had defined the component like:

// app/components/direct-upload-form.js
import Ember from 'ember';
export default Ember.Component.extend({

And then in my application.html.erb I added to the head tag:

<script type='x-handlebars' data-template-name='direct-upload-form'>
    <!-- yadda yadda yadda -->

However Ember couldn’t find it! Instead you have to namespace the template just like in Ember CLI:

<script type='x-handlebars' data-template-name='components/direct-upload-form'>
    <!-- yadda yadda yadda -->

And then Ember chugs along happily.

Thanks for the help!