CODEWITHSUNDEEP
javascriptember.js
Sabin
Sabin

Reputation: 777

Ember.js - multiple checkboxes - pass values to queryParam

I have a project setup like in the following Twiddle

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

I'm trying to pass the language.code to the language queryParam for each selected language. In the actual project I'm using https://github.com/DockYard/ember-one-way-controls and I've managed to do this with an action bound to the input but on the page refresh the checkboxes values won't stick.

Is there a way to achieve this?

Upvotes: 0

Views: 239

Answers (1)

Lux
Lux

Reputation: 18240

Well, your problem is that you can't bind queryParams to computed properties. So you can't to this in a nice way when using databindings, but when you go for DDAU, one way controls and closure actions its really easy.

By the way, you don't need ember-one-way-controls. Ember can now handle most of this by its own.

So your solution. First you need to bind your queryParams to an array, because you want to store a list of values:

selectedLanguages: [],
queryParams: ['selectedLanguages'],

Now you need to fire an action when a user clicks a checkbox. This can done by using a simple <input> element with closure actions:

<input type="checkbox" onclick={{action 'toggleLanguage' language}} checked={{language.checked}} />

Now you have an action where you can change that selectedLanguages array. A simple approach could look like this:

actions: {
  toggleLanguage(language) {
    const selectedLanguages = this.get('selectedLanguages');
    const {code} = language;

    if(selectedLanguages.includes(code)) {
      selectedLanguages.removeObject(code);
    } else {
      this.get('selectedLanguages').pushObject(code);
    }
  }
}

Now you have everything you want, just the checkboxes don't get checked after a page reload. But to fix this just use a CP to generate the checked boolean:

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

You can find a working solution in this twiddle.

Upvotes: 2

Related Questions