Reset Ember компонент на кнопку Нажмите

Question

фона:

У меня есть компонент внутри шаблона. Этот компонент представляет собой всплывающее окно, которое открывается нажатием кнопки. В этом всплывающем окне есть флажки (все по умолчанию установлены в false) внутри него. Когда я закрываю этот всплывающий ящик, я хочу полностью сбросить все переменные до настроек по умолчанию, т. Е. Все флажки теперь отключены. В настоящее время, когда я снова открываю это всплывающее окно, предыдущие флажки по-прежнему проверяются. Как я могу это сделать без ручного переключения каждого флажка:

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

Есть функция, которая будет автоматически сбросить компонент и снимите все галочки и установить переменные обратно в ложь?

Соответствующий код:

Шаблон: приложение/шаблон/home.hbs

{{popup-modal isOpen=showModal}} 

компонентов: приложение/шаблон/компоненты/всплывающее окно-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: приложение/компоненты/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

Много раз у меня также была схожая ситуация. И иногда значения были не просто логическими, а строковыми или числовыми (ненулевыми) значениями, поэтому мне также нужно было вернуть некоторые свойства компонента в исходное состояние.

На мой взгляд, сброс всех свойств компонента не очень хорош (я не знаю, возможно ли это вообще), потому что кто-то хотел бы добавить какое-либо свойство, которое должно сохранять его состояние даже после нажатия пользователем кнопки «Отмена» ,

Я думаю, что хорошая идея - сделать некоторую функцию, которая будет устанавливать все свойства в исходное состояние. Например, код может выглядеть так:

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. Хорошо, что компоненты живут и меняют состояние (например, свойства) без необходимости повторной инициализации, если они не были уничтожены. Потому что, когда некоторые свойства изменяются, не весь компонент переизлучается, а только вещи, которые были изменены (в данном случае только флажки).

Answer 2

Как говорили другие, было бы полезно воспроизвести код.

Однако, скорее всего, ответ будет задан по умолчанию (false в вашем случае) в одном из component lifecycle hooks.

init, вероятно, прекрасно, если компонент закрывается, когда вы закрываете его из шаблона.