javascript - 单击按钮时重置 Ember 组件

Question

背景:

我在模板中有一个组件。该组件是一个弹出框，单击按钮即可打开。该弹出框内有复选框(默认情况下全部设置为 false)。当我关闭此弹出框时，我想将所有变量完全重置为默认设置，即所有复选框现在都已关闭。目前，当我重新打开此弹出框时，之前的复选框仍处于选中状态。如何在不手动切换每个复选框的情况下执行此操作:

this.set("checkbox1", false);
this.set("checkbox2", false);
so on...

是否有一个函数可以自动重置组件并取消选中所有复选框并将变量设置回 false？

相关代码:

模板:app/template/home.hbs

{{popup-modal isOpen=showModal}}

组件:app/template/components/popup-modal.hbs

{{#bs-modal body=false footer=false open=isOpen title="popup box" closeAction=(action "cancel") submitAction=(action "submit")}}
  {{#bs-modal-body}}
     <label><input type="checkbox" {{action "toggleCheckbox" "checkbox1" on="click" preventDefault=false}}/> Checkbox 1</label>
     <label><input type="checkbox" {{action "toggleCheckbox" "checkbox2" on="click" preventDefault=false}}/> Checkbox 2</label>
  {{/bs-modal-body}}
  {{bs-modal-footer closeTitle="Cancel" submitTitle="Ok"}}
{{/bs-modal}}

组件 JS:app/components/popup-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  checkbox1: false,
  checkbox2: false,
  actions: {
    submit(){
      // close box
      this.set('isOpen', false);
    },
    cancel(){
      // how do I reset component here?
      // in other words, make all checkbox set to false
      // without manually doing it like below:
      this.set("checkbox1", false);
      this.set("checkbox2", false);
    },
    toggleCheckbox(checkbox){
      this.toggleProperty(checkbox);
    }
  }
});

Answer 1

我也遇到过很多次类似的情况。有时这些值不仅仅是 bool 值，而是字符串或数字(非零)值，因此我还需要能够将组件的某些属性重置为初始状态。

在我看来，重置组件的所有属性不太好(我不知道是否可能)，因为有人想添加一些属性，即使在用户单击“取消”按钮后也应该保持其状态。

我认为好主意是创建一些函数将每个属性设置为初始状态。例如，您的代码可能如下所示:

import Ember from 'ember';

export default Ember.Component.extend({
  // EmberJS Component hook fired after component have been initialized
  init() {
    this._super(...arguments);
    this.setInitialState();
  },

  setInitialState(){
    this.set("checkbox1", false);
    this.set("checkbox2", false);
  },

  actions: {
    submit(){
      // close box
      this.set('isOpen', false);
      this.setInitialState();
    },
    cancel(){
      this.setInitialState();
    },
    toggleCheckbox(checkbox){
      this.toggleProperty(checkbox);
    }
  }
});

PS。这很好，因为组件可以存在并更改其状态(例如属性)，如果没有被销毁，则不需要再次初始化。因为当某些属性发生更改时，不会重新呈现整个组件，而只会重新呈现已更改的内容(在本例中只是复选框)。