Question

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

{{#custom-form fields=fields}}

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

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

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

Answer 1

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

Answer 2

这就是你要找的东西。请参阅以下链接中的实现（工作示例）。

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 - 清除子组件上的表单字段

2 个答案: