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.
<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> |
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.
/* 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; | |
} |