Live Sortable Lists with CanJS

index.html

<script type='text/stache' can-autorender id='demo-html'>
Sort By:
  <select can-value="{people.comparator}">
    <option value='id'>ID</option>
    <option value='name'>Name</option>
    <option value='num'>Num</option>
    <option value='age'>Age</option>
  </select>
<table>
	<thead>
		  <tr>
      <th>id</th>
      <th>Name</th>
      <th>Num</th>
      <th>Age</th>
  </tr>
	</thead>
	{{#each people}}
		<tr>
      <td>{{id}}</td>
      <td><input can-value="{name}"/></td>
      <td>{{num}}</td>
      <td>{{age}}</td>
		</tr>
	{{/each}}
</table>
</script>

<p>If you are on <b>Sort By Name</b> then editing the names, which are 2-way bound with <code>can-value</code>, should automatically update the table <i>onchange</i></p>

Live-Sortable-Lists-with-CanJS.markdown

Live Sortable Lists with CanJS

Using CanJS and the sortable-plugin, having live sortable lists becomes easy, leading to an simple and expressive template that just works.

A Pen by Adam Barrett on CodePen.

License.

script.js

/* links jquery, [email protected], and the sortable-plugin */
var people = new can.List([
  {id: 1, name: "Alexis", num: 4, age: 88},
  {id: 2, name: "Eve", num: 3, age: 25},
  {id: 3, name: "Curtis", num: 5, age: 15},
  {id: 4, name: "David", num: 6, age: 55},
  {id: 5, name: "Brian", num: 2, age: 31},
]).attr("comparator","name");

$("#demo-html").viewModel({
  people: people
});

style.css

body, input {
  background: rgb(80,80,80);
  color: #eee;
}

input {
  border: 1px solid #eee;
  padding: 0.4em;
  color: #fff;
  font-weight: bold;
}

table {
	border-spacing: 0;
    margin-top: 10px;
}
th {
	text-align: left;
}
td {
	text-align: right;
}
td, th {
	padding: 5px;
}
button {
	cursor: pointer;
}