Skip to content

Instantly share code, notes, and snippets.

@BigAB
Created April 6, 2015 20:45
Show Gist options
  • Save BigAB/974e3ddf131856c13b75 to your computer and use it in GitHub Desktop.
Save BigAB/974e3ddf131856c13b75 to your computer and use it in GitHub Desktop.
Live Sortable Lists with CanJS
<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

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.

/* links jquery, canjs@2.2.4, 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
});
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment