如何将Ember组件的布局与输入元素相结合

Question

我从EmberJS 1.7更新到1.8时遇到了这个问题：https://github.com/emberjs/ember.js/issues/9461#issuecomment-61369680

[更新：示例jsbins可以在上面的链接中找到。我必须获得足够的声誉才能发布两个以上的链接。很抱歉给您带来不便！]

在EmberJS中，似乎不可能将组件与tagName"input"和布局结合起来。现在我有一个输入元素和一个图形表示，它们紧挨着放，比如：

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

图像内容由CSS规则驱动，该规则取决于单选按钮的状态（是的，我想设计自己的单选按钮）。

我的（可能非常天真）组件模板来实现渲染输出：

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

[更新：添加组件代码]

以及组件代码：

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'));
    }
});

但是使用EmberJS 1.8我的组件[更新：添加代码]

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

现在呈现为：

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

我现在对如何为输入元素保留属性绑定以及在EmberJS中使用组件布局感到困惑。

Answer 1

这里有一个向输入元素添加布局的解决方案：

http://emberjs.jsbin.com/nihacacebe/1/edit?html，js，输出

诀窍只是使用一个"代理"组件：

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

该组件允许向hbs中的输入元素添加一些布局，并将所有内容转发到"真实"组件：

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

然后，代理组件像真实组件一样使用：

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

此解决方案的灵感来自雅普实验室Ember Cli Add-On:的工作

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

我仍然很难理解为什么组件中的输入元素不允许使用布局。