How to call a function when removing and checking with Aurelia

Question

I have a list of elements included in the API, and they will not always be the same, so the number of elements in the array always changes. I create a check box for each item.

The user has the ability to check / deactivate each item. Here is what I want to do:

• When an element is checked, it will indicate the identifier of this element in the array
• If an element is not checked, it will remove the identifier of this element from the array.

I just need to know how I call something depending on whether it was checked or not checked. I tried "checked.delegate" and "checked.trigger" and I can not get this to work.

Just a normal click.delegate will not work, because I can’t keep the state true or false, and I can’t set the variables for all of them, because I don’t always know what elements will be included in the API. Any suggestions?

Answer 1

Try change.delegate or change.trigger as follows:

VM Method:

 logchange(value) { console.log(value); } 

View:

 <input type="checkbox" change.delegate="logchange($event.target.checked)" /> 

Answer 2

One way to do this is through a setter. Let's say you have a checkbox:

<input type="checkbox">

Create your own field in your view model, and then wrap it in the receiver and installer:

 get isChecked(){ return this._isChecked; } set isChecked(value){ this._isChecked = value; //enter your extra logic here, no need for an event handler } private _isChecked: boolean; 

Then bind isChecked to the view:

<input type="checkbox" checked.bind="isChecked">

Each time the checkbox is checked or unchecked, the caller will be called, and you can call any method you want using setter.

Another unconventional way to achieve this is to use the @bindable decorator as follows:

@bindable isChecked: boolean;

This is unconventional because you probably don't want isChecked be a binder, but the decorator gives you access to the isCheckedChanged method:

 isCheckedChanged(newValue, oldValue){ //Logic here } 

And, of course, there is a change event that you can catch with change.trigger and change.delegate , but this was already mentioned in another answer