单击按钮时重置Ember组件

Question

Background:

I have a component inside a template. This component is a pop up box which opens on a button click. This pop up box has check boxes (all by default set to false) inside of it. When I close this pop up box I want to completely reset all of the variables to the default settings, ie all checkboxes are now turned off. Currently, when I re-open this popup box the previous checkboxes are still checked. How do I do this without manually toggling every checkbox:

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

Is there a function that will automatically reset the component and uncheck all the checkboxes and set the variables back to false?

Relevant Code:

Template: app/template/home.hbs

{{popup-modal isOpen=showModal}}

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

Component 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

As others have said, it would be useful to have a reproduction of your code.

However - the answer is likely going to be setting the defaults you want (false in your case) in one of the component lifecycle hooks .

init is probably fine, assuming that the component gets destroyed when you close it from the template.

Answer 2

Many times i've also had similar situation. And sometimes the values were not just boolean but strings or numeric (non-zero) values, so I also needed to be able to reset some properties of the component to initial state.

In my opinion resetting all properties of the component is not so good (i don't know if it's even possible), because somebody would like to add some property which should keeps it's state even after user clicks "Cancel" button.

I think good idea is to make some function which will set every properties to initial state. For example your code can looks like:

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. This is good that components lives and changes it's state (for example properties) without need to be initialized again if it weren't destroyed. Because when some properties are changed not the whole component is rerendered, but only things which were changed (in this case just checkboxes).