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