Bind checkbox to element of one array in Ember 2+

Question

I'm trying to bind elements of one array to the checked attribute of checkboxes using Ember 2.8. I'm also using this in one component.

The checkboxes show all marked, but whenever I tried to use the action hideOrShowAllColumns it does not mark all checkboxes again if there was one which was not checked... so I guess I'm passing the value of the array element and not the element itself. I don't know how to do this in javascript/ember...

This is my view

{{input type="checkbox" name="all" checked=allColumnsChecked change=(action "hideOrShowAllColumns")}} 
All
{{#each model_table.columns as |column index|}}
    {{input type="checkbox" name=column checked=(getItemAt allColumns index) change=(action "hideOrShowColumn" index)}}
    {{column}}
{{/each}}

This is my component.js

export default Ember.Component.extend({
    init() {
        this._super(...arguments);
        this.set('allColumnsChecked', true);
    },
    didReceiveAttrs() {
        this._super(...arguments);
        let columnMap = this.get('columnMap');
        let allColumns = Array(columnMap.length).fill(true);
        this.set('allColumns', allColumns);
    },
    actions: {
         hideOrShowAllColumns() {
            let all = this.get('allColumnsChecked');
            all = !all;
            this.set('allColumnsChecked', all);
            if (all === true) {
                let allColumns = this.get('allColumns');
                allColumns = allColumns.map(() =>  true);
                this.set('allColumns', allColumns);
            }
        },
}

Helper getItemAt

export function getItemAt(params) {
    return params[0][params[1]];
}

score 1 · Accepted Answer · edited Sep 28 '16 at 17:07

1

For two-way binding you can't use primitive type.checked=(getItemAt allColumns index) this part won't workout. it will not update allColumns array values when you checked checkbox.
So I would recommend you to have model_table.columns in this array of column you can have checked property and you can use it in input helper.

First, model_table.columns should be an array of objects.

model_table.columns = [
    {
       'name': 'foo',
       'checked': true
    },
    {
       'name': 'bar',
       'checked': true
    }
]

Second, use the property in the htmlbar

{{#each model_table.columns as |column index|}}
    {{input type="checkbox" name=column.name checked=column.checked change=(action "hideOrShowColumn" index)}}
    {{column.name}}
{{/each}

Whenever you update checkbox it will update corresponding column.isChecked property.

To update the corresponding column need to use

Ember.set(column, 'checked', true)

where column is one element of the model_table.columns and checked is its property

edited Sep 28 '16 at 17:07

renno

2,659
2
27
58

answered Sep 28 '16 at 15:23

Ember Freak

12,918
4
24
54

I suspected this could be the reason of the malfunction, but how do I make this function `isChecked` ? my `model_table.columns` has the name of the columns; my var `allColumns` has the checked value of the columns. eg: `model_table.columns = ['id','name']; allColumns = [true, false];` – renno Sep 28 '16 at 15:33
Ok, I guess I have one idea. I should make `model_table.columns = [{'name': 'id', 'checked': true}, {'name': 'name', 'checked': true}]`. Let me test... – renno Sep 28 '16 at 15:38
Yes. Generate this struture using computed property using allColumns and model_table.columns . `model_table.columns =[{id:1,name:'name1',value:'value1',isChecked:true}] ` and try it out – Ember Freak Sep 28 '16 at 15:40
I'm getting an error now "Assertion Failed: You must use Ember.set() to set the `checked` property (of [object Object]) to `false`." I'm using this: `let model_table = this.get('model_table'); let column = model_table['columns'][i]; column['checked'] = false; model_table['columns'][i] = column; this.set('model_table', model_table);` – renno Sep 28 '16 at 15:48
try like this `Ember.set('columns','checked',false)` always use Ember.get and set only then it would be observale. – Ember Freak Sep 28 '16 at 15:54
I had to use Ember.set(column, 'checked', false) and it worked. I will edit your answer to be according to the real solution and mark as accepted since it lead me to the solution – renno Sep 28 '16 at 16:31

Bind checkbox to element of one array in Ember 2+

1 Answers1