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

#1

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:

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

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

#direct-upload-form.hbs
{{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?

#2

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: https://github.com/emberjs/ember.js/blob/v2.0.2/packages/ember-htmlbars/lib/system/bootstrap.js#L40 to see if it’s discovering your templates when htmlbars initializes.

#3

@jasonmit I’m using Ember 1.13

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

//ember-cli-build.js
...
module.exports = function(defaults) {
    ...
    app.import('bower_components/ember/ember-template-compiler.js');
    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 -->
</script>

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 -->
</script>

And then Ember chugs along happily.

Thanks for the help!