can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
64 lines (57 loc) • 1.18 kB
HTML
<body>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
th {
text-align: center;
}
td {
text-align: right;
}
td, th {
padding: 5px;
}
button {
cursor: pointer;
}
</style>
<script type='text/stache' can-autorender id='demo-html'>
<select can-value="{people.comparator}">
<option value='name'>Name</option>
<option value='num'>Num</option>
<option value='age'>Age</option>
</select>
<table>
<thead>
<tr><th>Name</th><th>Num</th><th>Age</th>
</thead>
{{#each people}}
<tr>
<td><input can-value="{name}"/></td><td>{{num}}</td><td>{{age}}</td>
</tr>
{{/each}}
</table>
</script>
<script src="../../node_modules/steal/steal.js" id='demo-source'>>
import can from "can";
import "can/list/sort/sort";
import $ from "jquery";
import "can/view/stache/stache";
import "can/view/autorender/autorender";
var people = new can.List([
{name: "Alexis", num: 4, age: 88},
{name: "Brian", num: 2, age: 31},
{name: "Mihael", num: 3, age: 25},
{name: "Curtis", num: 5, age: 15},
{name: "David", num: 6, age: 55},
]).attr("comparator","num");
$("#demo-html").viewModel({
people: people
});
</script>
</body>