jdanyow/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Aurelia Checkbox Problem

This plunkr is to demonstrate a problem I am having with checkbox binding in Aurelia.
Here are the steps to reproduce:

Select "Field 1" and check the box for the value "A"
Now select "Field 2" and check the box for the value "1"
Select "Field 1" again.  You will see that "A" is not checked
Check the box for "B" on "Field 1" and "A" will become checked again as well.

I have added badges against the fields so that you can see the count of the
selected values.  These prove that the binding is actually working correctly, so
there must be a problem in the rendering of the items.
This is more obvious when you check the value "4" for "Field 2".  This one
actually stays checked correctly and I think that is because it is removed and
re-added to the DOM when swapping between fields.

  
## app.html
<template>

  <div class="container">

    <div class="row">

      <div class="col-sm-6">
        <div class="list-group">
          <a href="#" repeat.for="row of data.fields" class="list-group-item" click.trigger="selectField(row)">
            ${row.name}
            <span class="badge">${row.selectedValues.length}</span>

          </a>
        </div>
      </div>

      <div class="col-sm-6" if.bind="selectedField">
        <ul class="list-group">
          <li repeat.for="row of selectedField.values" class="list-group-item">
            <label><input type="checkbox" model.bind="row" checked.bind="selectedField.selectedValues"/> ${row}</label>
          </li>
        </ul>
      </div>

    </div>

  </div>

</template>

## app.js
export class App {

  data = {
    fields: [
      {id: 1, name: 'Field 1', values: ['A', 'B', 'C'], selectedValues: []},
      {id: 2, name: 'Field 2', values: ['1', '2', '3', '4'], selectedValues: []}
    ]
  };

  selectedField = null;

  selectField(field) {
    this.selectedField = field;
  }

}


## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
	<template>

	<div class="container">

	<div class="row">

	<div class="col-sm-6">
	<div class="list-group">
	<a href="#" repeat.for="row of data.fields" class="list-group-item" click.trigger="selectField(row)">
	${row.name}
	<span class="badge">${row.selectedValues.length}</span>

	</a>
	</div>
	</div>

	<div class="col-sm-6" if.bind="selectedField">
	<ul class="list-group">
	<li repeat.for="row of selectedField.values" class="list-group-item">
	<label><input type="checkbox" model.bind="row" checked.bind="selectedField.selectedValues"/> ${row}</label>
	</li>
	</ul>
	</div>

	</div>

	</div>

	</template>
	export class App {

	data = {
	fields: [
	{id: 1, name: 'Field 1', values: ['A', 'B', 'C'], selectedValues: []},
	{id: 2, name: 'Field 2', values: ['1', '2', '3', '4'], selectedValues: []}
	]
	};

	selectedField = null;

	selectField(field) {
	this.selectedField = field;
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>