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]];
}

renno · Accepted Answer · 2016-09-28 17:07:01Z

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, 2016 at 17:07

renno

2,8472 gold badges36 silver badges59 bronze badges

answered Sep 28, 2016 at 15:23

Ember Freak

12.9k5 gold badges26 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

renno Over a year ago

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 Over a year ago

Ok, I guess I have one idea. I should make model_table.columns = [{'name': 'id', 'checked': true}, {'name': 'name', 'checked': true}]. Let me test...

Ember Freak Over a year ago

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

renno Over a year ago

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);

Ember Freak Over a year ago

try like this Ember.set('columns','checked',false) always use Ember.get and set only then it would be observale.

|

Collectives™ on Stack Overflow

Bind checkbox to element of one array in Ember 2+

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related