when bind "click.delegate" to checkbox input element, ui will not follow the checked value, always show uncheck state about binding HOT 5 CLOSED

@liuyuanhuo please try toggleAll() { return true; } as you need to leverage the stop propagation convention within the click handler.

from binding.

this usually happens when the click event toggles the state of the element before the callback toggles the state of the element. in other words, clicking an empty box checks the box, and then your function unchecks it again. can you post the contents of your toggleAll function

from binding.

this should be resolved with #25

from binding.

@liuyuanhuo can you confirm this issue is fixed for you? We're wondering if we can close this or if further troubleshooting is needed.

from binding.

I have a test for this issue, and the problem still exist.
click on the checkbox, the ui state always show uncheck state.
if delete the code [ click.delegate="toggleAll();" ], the ui state is correct!

I update the skeleton-navigation sample's welcome page for test.
just add the html code below to welcome.html,

      <br/>
      <input id="chkToggleAll" type="checkbox" click.delegate="toggleAll();" >
      <br/>

and the js code below to welcome.js,

  toggleAll()
  {
    //alert(`Welcome, ${this.fullName}!`);  
  }

and the whole files:

welcome.html

<template>
  <section class="au-animate">
    <h2>${heading}</h2>

    <form role="form" submit.delegate="welcome()">
      <div class="form-group">
        <label for="fn">First Name</label>
        <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name">
      </div>
      <div class="form-group">
        <label for="ln">Last Name</label>
        <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
      </div>
      <div class="form-group">
        <label>Full Name</label>
        <p class="help-block">${fullName | upper}</p>
      </div>
      <br/>
      <input id="chkToggleAll" type="checkbox" click.delegate="toggleAll();" >
      <br/>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>

welcome.js

import {computedFrom} from 'aurelia-framework';

export class Welcome{
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  //Getters can't be observed with Object.observe, so they must be dirty checked.
  //However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
  //To optimize by declaring the properties that this getter is computed from, uncomment the line below.
  //@computedFrom('firstName', 'lastName')
  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  welcome(){
    alert(`Welcome, ${this.fullName}!`);
  }

  toggleAll()
  {
    //alert(`Welcome, ${this.fullName}!`);  
  }
}

export class UpperValueConverter {
  toView(value){
    return value && value.toUpperCase();
  }
}

from binding.