javascript - Ember.js - 多个复选框 - 将值传递给 queryParam

Question

我有一个像下面的 Twiddle 一样的项目设置

https://ember-twiddle.com/9b8b42ac659f746370576ed8fde64630

我正在尝试将 language.code 传递给每种选定语言的 language queryParam。在实际项目中我使用的是https://github.com/DockYard/ember-one-way-controls我已经设法通过绑定(bind)到输入的操作来做到这一点，但在页面刷新时，复选框值不会粘住。

有办法实现吗？

Answer 1

好吧，你的问题是你无法绑定(bind) queryParams计算属性。因此，在使用数据绑定(bind)时，您无法以一种很好的方式实现这一点，但是当您使用 DDAU 时，一种控制和关闭操作的方式非常简单。

顺便说一下，你不需要 ember-one-way-controls 。 Ember 现在可以自己处理大部分问题。

所以你的解决方案。首先你需要绑定(bind)你的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 bool 值:

languagesWithSelected: Ember.computed('selectedLanguages.[]', 'languages.@each.code', {
  get() {
    return this.get('languages').map(({code, name}) => ({
      code,
      name,
      checked: this.get('selectedLanguages').includes(code),
    }));
  }
}),

您可以在 this twiddle 中找到可行的解决方案.