将同级div添加到Ember Form中作为输入元素

Question

我正在使用Ember Form For，我想知道是否可以添加同级元素。

当前正在这样做：{{f.radio-field "gender" "female"}}

将呈现以下内容：

<div>
  <label><input type="radio" value="female" />Female</label>
</div>

我需要一个容器兄弟元素，可以向其中添加CSS伪类。我无法定位输入的父容器，因此为什么需要同级元素。 所以这样的事情就是我所追求的：

<div>
  <label>
    <input type="radio" value="female" />
    Female
    <div class="someClass></div>
  </label>
</div>

Answer 1

更新的答案

此插件似乎支持自定义组件，可以在old docs和源代码中找到

旧答案（此特定插件可能无法正常工作）

从理论上讲，应该可以通过扩展https://github.com/martndemus/ember-form-for/blob/master/addon/components/form-fields/radio-field.js并替换my-radio-field

来创建自己的组件（即layout）

组件代码：

import Component from 'ember-form-for/components/form-fields/radio-field';
import layout from 'my-project-name/templates/components/my-radio-field';

export default Component.extend({layout});

模板：

{{#form-field propertyName
    class="radio-field"
    classNames=fieldClasses
    errorClasses=errorClasses
    hintClasses=hintClasses
    inputClasses=inputClasses
    labelClasses=labelClasses
    object=object
    hint=hint
    form=form
    label=labelText
    control=control
    update=(action update) as |f|}}
  {{#f.label required=required}}
    {{f.control
        option=value
        accesskey=accesskey
        autocomplete=autocomplete
        autofocus=autofocus
        autosave=autosave
        dir=dir
        disabled=disabled
        hidden=hidden
        lang=lang
        list=list
        required=required
        tabindex=tabindex
        title=title
    }}
    {{f.labelText}}
    <div>Hello world</div>
  {{/f.label}}
  {{f.errors}}
  {{f.hint}}
{{/form-field}}