Question

我有一个项目设置，如下面的Twiddle

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

我正在尝试将language.code传递给每个所选语言的language queryParam。在实际项目中，我正在使用https://github.com/DockYard/ember-one-way-controls并且我设法通过绑定到输入的操作执行此操作，但在页面上刷新复选框值将不会粘住。

有没有办法实现这个目标？

Answer 1

好吧，您的问题是您无法将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.[]', 'languages.@each.code', {
  get() {
    return this.get('languages').map(({code, name}) => ({
      code,
      name,
      checked: this.get('selectedLanguages').includes(code),
    }));
  }
}),

您可以在this twiddle找到有效的解决方案。

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

1 个答案: