component templates defined within subfolder causing error when compiling them using grunt-ember-templates

983 views Asked by At

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.

0

There are 0 answers