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

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

但是 - 答案可能是在component lifecycle hooks之一中设置您想要的默认值（在您的情况下为假）。

init可能没什么问题，假设当你从模板中关闭它时组件被破坏了。

Answer 2

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

在我看来，重置组件的所有属性并不是那么好（我不知道它是否可能），因为有人想添加一些应该保留它的属性。即使用户点击＆＃34;取消＆＃34;按钮。

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

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。组件生存并改变其状态（例如属性）是好的，如果它没有被破坏则无需再次初始化。因为当某些属性被更改时，不会重新呈现整个组件，而只会更改已更改的内容（在这种情况下只是复选框）。

重置按钮上的Ember组件单击

2 个答案: