上的按鈕進行復位灰燼組件單擊

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

很多時候我也有類似的情況。有時這些值不僅僅是布爾值，而是字符串或數字（非零）值，所以我還需要能夠將組件的某些屬性重置爲初始狀態。

在我看來，重置組件的所有屬性並不是很好（我不知道它是否可能），因爲有人希望添加一些屬性，即使在用戶單擊「取消」按鈕後，它仍應保持其狀態。

我認爲好主意是做一些功能，將每個屬性設置爲初始狀態。例如，您的代碼可能類似於：

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之一中設置所需的默認值（在您的情況下爲false）。

init可能是好的，假設組件從模板關閉時被破壞。