EmberJS - 清除子组件上的表单字段

Question

我正在开发一个项目，该项目有一个为表单生成自定义字段的组件，我需要在按下按钮后重置其中的内容。此按钮还会重置其余的硬编码字段。

{{#custom-form fields=fields}}

这就是我将数据传递给子组件以生成字段的方式，输入是通过常规 {{#each fields as |field|}} 生成的。另一个组件自己生成字段，如下所示：

{{input value=field.value placeholder=field.name}}

如何访问这些生成的字段以在重置表单其余部分的同时重置它们？

Answer 1

您应该能够遍历 fields 并将 value 设置为 null。

Answer 2

这就是您要找的。请参见下面 link.

中的实现（工作示例）

Ember Twiddle

您需要一个单独的自定义字段组件 custom-fields。与自定义字段相关的功能仅在该组件中处理（创建、读取、更新）。并且还需要模板中的全局映射，将字段传递给自定义组件，以便单击即可清除所有字段。

实施：

application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  fields:function()
  {
        return {defaultfields: [{name:"User ID",value:""},
                        {name:"Email",value:""},
                        {name:"Phone No.",value:""}],
              customfields: [{name:"Blood Group",value:""},
                         {name:"Gender",value:""},
                         {name:"Company",value:""}]};
  }.property(),
  actions:
  {
        clearAllFields:function()
        {
            var fields = this.get("fields");
            Object.keys(fields).forEach(function(key){
                        fields[key].setEach("value","");
          });
        }
  }
});

application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
        {{#each fields.defaultfields as |field|}}
        {{input type="text" placeholder=field.name value=field.value}}<br>
    {{/each}}
    <br>
        {{custom-form fields=fields.customfields}}
    <br>
    <button {{action "submitData"}}>Submit</button>
    <button {{action "clearAllFields"}}>Clear All fields</button>
<br>
<br>

自定义-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  fields:"",
  isaddnewcustomproperty:false,
  actions:
  {
        toggleProperty : function(property)
        {
            this.toggleProperty(property);
      },
        addCustomProperty : function()
        {
            var fields = this.get("fields");
            var propname = this.get("propname");
            var propvalue = this.get("propvalue");
            var ispropertyabsent = fields.every(function(item){
                return item.name.toUpperCase() != propname.toUpperCase();
          });
            if(ispropertyabsent)
            {
                fields.pushObject({name:propname,value:propvalue});
            }
          else
          {
              var obj = fields.find(function(item){
                    return item.name.toUpperCase() == propname.toUpperCase();
              });
                Ember.set(obj,"value",propvalue);
                            Ember.setProperties(fields.find(function(item){ return item.name.toUpperCase() == propname.toUpperCase();}),obj);
          }
        },
        clearCustomFields : function()
        {
            this.get("fields").setEach("value","");
        }
  }
});

自定义-form.hbs

{{#each fields as |field|}}
     {{input type="text" placeholder=field.name value=field.value}}<br>
{{/each}}

{{#if isaddnewcustomproperty}}
        {{input value=propname}}{{input value=propvalue}}
    <button {{action "addCustomProperty"}}>Add</button>
    <button {{action "toggleProperty" "isaddnewcustomproperty"}}>Cancel</button>
{{else}}
        <button {{action "toggleProperty" "isaddnewcustomproperty"}}>Add Field</button>
{{/if}}
<br>
<button {{action "clearCustomFields"}}>Clear custom fields</button>

EmberJS - 清除子组件上的表单字段

EmberJS - Clearing form fields on child component

javascript

handlebars.js

ember.js