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?
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.
@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!