Table example
This commit is contained in:
parent
35f0b75389
commit
16365e7e95
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Syndicate: Table Example</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src="../../dist/syndicatecompiler.js"></script>
|
||||||
|
<script src="../../dist/syndicate.js"></script>
|
||||||
|
<script type="text/syndicate-js" src="index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Table Example</h1>
|
||||||
|
<table id="the-table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th data-column="0">ID</th>
|
||||||
|
<th data-column="1">First Name</th>
|
||||||
|
<th data-column="2">Last Name</th>
|
||||||
|
<th data-column="3">Address</th>
|
||||||
|
<th data-column="4">Age</th>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>
|
||||||
|
Click on column headings to sort data rows.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Source code: <a href="index.js">index.js</a>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,59 @@
|
||||||
|
assertion type person(id, firstName, lastName, address, age);
|
||||||
|
message type setSortColumn(number);
|
||||||
|
|
||||||
|
function newRow(id, firstName, lastName, address, age) {
|
||||||
|
actor {
|
||||||
|
react {
|
||||||
|
assert person(id, firstName, lastName, address, age);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function spawnModel() {
|
||||||
|
newRow(1, 'Keith', 'Example', '94 Main St.', 44);
|
||||||
|
newRow(2, 'Karen', 'Fakeperson', '5504 Long Dr.', 34);
|
||||||
|
newRow(3, 'Angus', 'McFictional', '2B Pioneer Heights', 39);
|
||||||
|
newRow(4, 'Sue', 'Donnem', '1 Infinite Loop', 104);
|
||||||
|
newRow(5, 'Boaty', 'McBoatface', 'Arctic Ocean', 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function spawnView() {
|
||||||
|
actor {
|
||||||
|
var ui = new Syndicate.UI.Anchor();
|
||||||
|
var orderColumn = 2;
|
||||||
|
|
||||||
|
function cell(text) {
|
||||||
|
// Should escape text in a real application.
|
||||||
|
return '<td>' + text + '</td>';
|
||||||
|
}
|
||||||
|
|
||||||
|
react {
|
||||||
|
on message setSortColumn($c) { orderColumn = c; }
|
||||||
|
|
||||||
|
during person($id, $firstName, $lastName, $address, $age) {
|
||||||
|
assert ui.context(id)
|
||||||
|
.html('table#the-table tbody',
|
||||||
|
'<tr>' + [id, firstName, lastName, address, age].map(cell).join('') + '</tr>',
|
||||||
|
[id, firstName, lastName, address, age][orderColumn]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function spawnController() {
|
||||||
|
actor {
|
||||||
|
react {
|
||||||
|
on message Syndicate.UI.globalEvent('table#the-table th', 'click', $e) {
|
||||||
|
:: setSortColumn(JSON.parse(e.target.dataset.column));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ground dataspace G {
|
||||||
|
Syndicate.UI.spawnUIDriver();
|
||||||
|
|
||||||
|
spawnModel();
|
||||||
|
spawnView();
|
||||||
|
spawnController();
|
||||||
|
}
|
Loading…
Reference in New Issue