javascript - 将同级 div 添加到 Ember Form For 输入元素

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}}