We are relying heavily on ember components. Initially we had all our hbs templates associated with components written within "templates/components" folder, but since the number of components are growing we wanted to give more structure and define the templates within subfolder within components folder. When doing so, ember complains
You are looking for a [XYZ] component in the [SUBFOLDER] namespace, but the namespace could not be found
My compiled template looks like:
Ember.TEMPLATES["components/answers/checkbox-answer"] = ...
But things work if I were to make following change :
Ember.TEMPLATES["components/checkbox-answer"] = ...
The work around I have now is to modify gruntfile like this
emberTemplates: {
options: {
templateName: function(sourceFile) {
var fileName = sourceFile.replace(/.*\/templates\//, '');
if((/^components\//).test(fileName)){
/*if component hbs files are defined within sub-folder, remove the subfolder part*/
return "components"+fileName.substr(fileName.lastIndexOf('/'));
}
return sourceFile.replace(/.*\/templates\//, '');
}
}
I am not sure if this is an ember thing or something else. But putting the question out there hoping for some better solution.
UPDATE It seems like the problem is caused because of the way we were loading components. We are basically using helper function that loads the component based on parameter we pass to it like :
Ember.Handlebars.helpers[componentToLoad].call(this, options);
I checked the Ember.Handlebars.helpers and it doesn't seem to have components that were defined within any folder within component.