单击按钮时重置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

正如其他人所说，复制您的代码会很有用。

但是，答案可能是在组件生命周期挂钩之一中设置所需的默认值（在您的情况下为false）。

如果假设您从模板关闭组件时该组件被销毁，则init可能很好。

Answer 2

很多时候我也有类似的情况。 有时这些值不仅是布尔值，还包括字符串或数字（非零）值，因此我还需要能够将组件的某些属性重置为初始状态。

我认为重置组件的所有属性并不是很好（我什至不知道是否有可能），因为有人想添加一些属性，即使用户单击“取消”按钮也应保持其状态。

我认为好主意是做一些将所有属性设置为初始状态的函数。 例如，您的代码如下所示：

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。 如果组件没有被销毁，那么无需重新初始化组件即可生存并更改其状态（例如属性），这是很好的。 因为当某些属性发生更改时，不会重新呈现整个组件，而是仅更改了已更改的内容（在这种情况下，仅复选框）。