我有一個項目的設置如以下玩弄Ember.js - 多個複選框 - 值傳遞給queryParam
https://ember-twiddle.com/9b8b42ac659f746370576ed8fde64630
我想給language.code傳遞給language queryParam每個選定的語言。在我使用https://github.com/DockYard/ember-one-way-controls的實際項目中，我設法通過綁定到輸入的操作來完成此操作，但是在頁面上刷新複選框後值不會保持不變。
有沒有辦法做到這一點？
那麼，你的問題是，你不能綁定queryParams計算屬性。所以當你使用數據綁定時，你不能以一種很好的方式，但是當你使用DDAU時，一種方法控制和關閉操作非常簡單。
順便說一句，你不需要ember-one-way-controls。 Ember現在可以通過它自己處理大部分。
所以你的解決方案。 首先，你需要你的queryParams綁定到一個數組，因爲要存儲的值的列表：
selectedLanguages: [],
queryParams: ['selectedLanguages'],
現在，您需要在用戶點擊一個複選框火的作用。這可以通過使用簡單的<input>元素與閉合動作完成：
<input type="checkbox" onclick={{action 'toggleLanguage' language}} checked={{language.checked}} />
現在你有一個動作，你可以更改selectedLanguages陣列。一個簡單的方法可以是這樣的：
actions: {
toggleLanguage(language) {
const selectedLanguages = this.get('selectedLanguages');
const {code} = language;
if(selectedLanguages.includes(code)) {
selectedLanguages.removeObject(code);
} else {
this.get('selectedLanguages').pushObject(code);
}
}
}
現在，你有你想要的一切，只是複選框沒有得到一個頁面重新加載後進行檢查。但要解決這個問題只使用一個CP生成checked布爾：
languagesWithSelected: Ember.computed('selectedLanguages.[]', '[email protected]', {
get() {
return this.get('languages').map(({code, name}) => ({
code,
name,
checked: this.get('selectedLanguages').includes(code),
}));
}
}),
你可以找到this twiddle一個可行的解決方案。