How to combine Layout for Ember Components with input Elements

Question

I ran into this issue by updating from EmberJS 1.7 to 1.8: https://github.com/emberjs/ember.js/issues/9461#issuecomment-61369680

[Update: the example jsbins can be found in the link above. I've to earn enough reputation to be allowed to post more than two links. I am sorry for the inconvenience!]

In EmberJS it seems not to be possible to combine a component with tagName 'input' and a layout. Now I have an input element and a graphical representation sitting next to each other like:

<svg ...>
<input type="radio"...>

The image content is driven by a CSS rule which depends on the radio button state (yes, I want to style my own radio button).

My (propably very naive) components-template to achieve the rendered output:

<script type="text/x-handlebars" id="components/radio-button">
<svg><circle cx="50%" cy="50%" r="8" /></svg>
{{yield}}
</script>

[Update: Added component code]

And the component code:

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
    return {'radio': 0};
},
});

App.RadioButtonComponent = Ember.Component.extend({
    tagName: 'input',
    attributeBindings: [
    'type',
    'checked',
    'disabled',
    'tabindex',
    'name',
    'autofocus',
    'required',
    'form',
    'value'
    ],
    type: 'radio',
    checked: false,
    disabled: false,
    indeterminate: false,

    init: function() {
        this._super();
        this.on('change', this, this._updateElementValue);

        var name = this.get('name'),
        controller = this.get('radioController'),
        checked = controller.get('model.%@'.fmt(name)) === this.get('value');

        this.set('checked', checked);
    },

    group: "radio_button",
    classNames: ['radio-button'],

    _updateElementValue: function() {
        var name = this.get('name'),
        controller = this.get('radioController');

        controller.set('model.%@'.fmt(name), this.get('value'));
    }
});

But with EmberJS 1.8 my component [Update: added code]

<script type="text/x-handlebars">
    {{radio-button name="radio" radioController=this value=0}}
</script>

now gets rendered like:

<input type="radio"...><svg ...></input>

I'am now puzzled by how to keep attribute bindings for input elements and use layouts with components in EmberJS.

It would be helpful if you provided the code to your component that demonstrates the issue and uses your template so people can understand more clearly what you are trying to do and diagnose the issue. A jsbin would be even better — Andrew Hacking
@Andrew Hacking yes, you are right. I tried to add links to jsbin, but since this is my first question on StackOverflow I was only allowed to post two links. The jsbin examples can be found in the first link in my question. I am really sorry for the link hopping. My first working example is here: emberjs.jsbin.com/jumozipani/2/edit?html,js,output, my second broken example here: emberjs.jsbin.com/jumozipani/2/edit?html,js,output — Ole Roel

Ole Roel Ole Roel · Accepted Answer · 2014-11-08T18:33:40

Here is an solution for adding a layout to an input element:

http://emberjs.jsbin.com/nihacacebe/1/edit?html,js,output

The trick simply is to use a 'proxy' component:

  <script type="text/x-handlebars" id="components/radio-button">
    {{radio-button-input name=name radioController=radioController value=value}}
    <i>{{name}}</i>
    {{yield}}
  </script>

This component allows to add some layout to the input element in the hbs and forwards everything to the 'real' component:

App.RadioButtonInputComponent = Ember.Component.extend({
    tagName: 'input',
    type: 'radio',
    /* Add your code here... */
});

The proxy component is then used like a real component:

<script type="text/x-handlebars">
    {{radio-button name="radio" radioController=this value=0}}
</script>

This solution was inspired by the work of Yapp Labs Ember-Cli Add On:

https://github.com/yapplabs/ember-radio-button

I still have a hard time to understand why using layout is not permitted for input elements in components.

How to combine Layout for Ember Components with input Elements

1 Answers