with ember cli, how to specify different layout for a component within POD structure

Question

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

Answer 1

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