I have a a basic ember cli app with a component, and I wanted to specify different layoutName to the component based on a property passed to it. I am not sure how to achieve this. Right now I just want to know how to specify a templateName to a known template to get started. This is what I tried:
import Ember from 'ember';
export default Ember.Component.extend({
layoutName: null,
initialize: function() {
this.set('layoutName', 'pi/pods/components/questions/single-select/standard-layout');
}.on('init')
});
and my folder structure looks like:
app
|-pods
|-components
|-questions
|-single-select
|-component.js
|-template.hbs//just has {{yield}}
|-standard-layout.hbs//says hello
JUST A THOUGHT : This may be a new question itself - before we used jsbin to collaborate but now how can we achieve same when we are building stuff with ember-cli!!
SOLUTION : as per @sunrize920 suggestion, I had to break out of POD structure a bit. So the working solution looks like this:
import Ember from 'ember';
export default Ember.Component.extend({
layoutName: null,
initialize: function() {
this.set('layoutName', 'components/questions/single-select/standard-layout');
}.on('init')
});
And then my folder structure looks like this:
dev-folder
|-app
|-pods
|-components
|-questions
|-single-select
|-component.js
|-standard-layout
|-template.hbs
So component's and layout don't exactly work out of the box like you are expecting. Lets say we have component called my-component
. Ember interprets the template you define at templates/components/my-component
as the layout and anything you wrap the component around via block syntax: {{#my-compenent}}{{/my-component}}
as the component's template. Look at this JSBin to see what I mean.
What I am talking about isn't using pod syntax, but I would imagine that if you did not define the template.hbs
or whatever the convention is that ember-cli uses to resolve the components template, you should be able to pass a layoutName
and templateName
to your component. Hope that works