How to configure checkbox binding in Aurelia

Question

I have a list of flags, when the user checks one of the flags, the function in the .js file is called, and he, in turn, calls the dataservice.js method, which calls the webapi controller, all this works fine and returns the correct data.

What happens when the process is completed, the flag that starts the sequence is not checked. I checked the result and schoolDistrict.IsChecked for this element is set to true, which is correct.

How do I check the box?

Below is the code, but I'm not sure if check.one-way bind

<li repeat.for="schoolDistrict of schools.Districts"> <input type="checkbox" checked.one-way="schoolDistrict.IsChecked" value="${schoolDistrict.Value}" click.trigger="searchSchoolDistrict()"/>${schoolDistrict.Name} </li> 

Any help would be greatly appreciated.

Answer 1

There are several issues here:

• Probably the problem is that your searchSchoolDistrict() code is changing the IsChecked property, but the one-way binding does not listen for the changes.
• While value interpolation will work, using binding syntax is probably the best style.
• The change.delegate setting change.delegate more reliable and will listen to all changes in this checkbox, which is best practice for checkboxes.
• Deprecated Make sure you select the correct scope for searchSchoolDistrict() , since it probably lives on $parent , not schoolDistrict .

Try using this instead:

 <li repeat.for="schoolDistrict of schools.Districts"> <input type="checkbox" checked.bind="schoolDistrict.IsChecked" value.one-way="schoolDistrict.Value" change.delegate="searchSchoolDistrict()"/> ${schoolDistrict.Name} </li>