버튼에 엠버 구성 요소를 다시

Question

배경 클릭 : 나는 템플릿 내부 구성 요소가

합니다. 이 구성 요소는 버튼 클릭시 열리는 팝업 상자입니다. 이 팝업 상자에는 체크 박스 (기본적으로 모두 false로 설정)가 있습니다. 이 팝업 상자를 닫으면 모든 변수가 기본 설정으로 완전히 재설정됩니다. 즉 모든 체크 박스가 이제 꺼져 있습니다. 현재이 팝업 상자를 다시 열면 이전 체크 박스가 계속 선택됩니다. 어떻게하면이 수동으로 모든 확인란을 전환하지 않고합니까 :

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

자동으로 구성 요소를 재설정하고 모든 체크 박스를 해제하고 false로 다시 변수를 설정하는 기능이 있습니까?

관련 코드 :

템플릿 : 응용 프로그램/템플릿/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 : 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

여러 번 비슷한 상황이있었습니다. 그리고 때로는 부울 값이 아니라 문자열 또는 숫자 (0이 아닌) 값이기도하므로 구성 요소의 일부 속성을 초기 상태로 재설정 할 수 있어야했습니다.

제 생각에는 사용자가 "취소"버튼을 클릭 한 후에도 상태를 유지해야하는 일부 속성을 추가하려고하므로 구성 요소의 모든 속성을 재설정하는 것이 그리 좋지 않습니다 (가능한지 모르겠 음). .

좋은 생각은 모든 속성을 초기 상태로 설정하는 일부 기능을 만드는 것입니다. 예를 들어 코드는 다음과 같습니다.

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

다른 사람들이 말했듯이, 코드를 재현하는 것이 유용 할 것입니다.

그러나 답은 아마도 component lifecycle hooks 중 하나에 원하는 기본값 (원하는 경우 거짓)을 설정하는 것일 수 있습니다.

init은 아마도 템플릿에서 이미지를 닫을 때 구성 요소가 파괴되었다고 가정 할 때 문제가되지 않습니다.