@seanox/aspect-js
Version:
full stack JavaScript framework for SPAs incl. reactivity rendering, mvc / mvvm, models, expression language, datasource, routing, paths, unit test and some more
160 lines (155 loc) • 4.15 kB
HTML
<html>
<head>
<meta charset="ISO-8859-1">
<title>Seanox aspect-js test environment</title>
<style>
body {
font-family: monospace;
white-space: pre;
}
</style>
<script src="aspect-js.js"></script>
<script src="scripts/capture.js"></script>
<script type="text/javascript">
Test.activate();
const values = [];
const capture = new Capture();
Composite.listen(Composite.EVENT_RENDER_END, () => {
capture.snap();
if (document.querySelector("input"))
capture.snap(document.querySelector("input").value);
if (capture.size() === capture.patterns().length)
Test.start();
});
Test.create({test() {
capture.validate();
}});
modelA = {
valueA: "hallo"
}.reactive();
window.setTimeout(() => {modelA.valueA = "a2b4c6d8e0";}, 1000);
window.setTimeout(() => {window.location.href = "#modelA";}, 2000);
window.setTimeout(() => {modelA.valueA = "b4c6d8e0a2";}, 3000);
window.setTimeout(() => {window.location.href = "#";}, 4000);
window.setTimeout(() => {modelA.valueA = "c6d8e0f2g4";}, 5000);
</script>
<script type="text/test">
_A_hallo_
_C_HALLO_
_D_o_
</script>
<script type="text/test">
_A_a2b4c6d8e0_
_C_HALLO_
_D_o_
</script>
<script type="text/test">
_A_a2b4c6d8e0_
_C_A2B4C6D8E0_
_D_o_
</script>
<script type="text/test">
_A_a2b4c6d8e0_
_C_A2B4C6D8E0_
_D_c6d8e0_
</script>
<script type="text/test">
_A_a2b4c6d8e0_
Value of variable modelA.valueA: a2b4c6d8e0
_C_A2B4C6D8E0_
_D_c6d8e0_
</script>
<script type="text/test">
a2b4c6d8e0
</script>
<script type="text/test">
_A_b4c6d8e0a2_
Value of variable modelA.valueA: a2b4c6d8e0
_C_A2B4C6D8E0_
_D_c6d8e0_
</script>
<script type="text/test">
a2b4c6d8e0
</script>
<script type="text/test">
_A_b4c6d8e0a2_
Value of variable modelA.valueA: a2b4c6d8e0
_C_B4C6D8E0A2_
_D_c6d8e0_
</script>
<script type="text/test">
a2b4c6d8e0
</script>
<script type="text/test">
_A_b4c6d8e0a2_
Value of variable modelA.valueA: a2b4c6d8e0
_C_B4C6D8E0A2_
_D_d8e0a2_
</script>
<script type="text/test">
a2b4c6d8e0
</script>
<script type="text/test">
_A_b4c6d8e0a2_
Value of variable modelA.valueA: a2b4c6d8e0
_C_B4C6D8E0A2_
_D_d8e0a2_
</script>
<script type="text/test">
b4c6d8e0a2
</script>
<script type="text/test">
_A_b4c6d8e0a2_
Value of variable modelA.valueA: b4c6d8e0a2
_C_B4C6D8E0A2_
_D_d8e0a2_
</script>
<script type="text/test">
b4c6d8e0a2
</script>
<script type="text/test">
_A_b4c6d8e0a2_
Value of variable modelA.valueA: b4c6d8e0a2
_C_B4C6D8E0A2_
_D_d8e0a2_
</script>
<script type="text/test">
b4c6d8e0a2
</script>
<script type="text/test">
_A_b4c6d8e0a2_
_C_B4C6D8E0A2_
_D_d8e0a2_
</script>
<script type="text/test">
_A_c6d8e0f2g4_
_C_B4C6D8E0A2_
_D_d8e0a2_
</script>
<script type="text/test">
_A_c6d8e0f2g4_
_C_C6D8E0F2G4_
_D_d8e0a2_
</script>
<script type="text/test">
_A_c6d8e0f2g4_
_C_C6D8E0F2G4_
_D_e0f2g4_
</script>
<script type="text/test">
_A_c6d8e0f2g4_
_C_C6D8E0F2G4_
_D_e0f2g4_
</script>
</head>
<body route>
_A_{{modelA.valueA}}_
<p id="modelA" composite route>
<input type="text" id="valueA" events="input" value="{{modelA.valueA}}">
Value of variable modelA.valueA: {{modelA.valueA}}
</p>
_C_{{modelA.valueA.toUpperCase()}}_
_D_{{modelA.valueA.substring(4)}}_
</body>
</html>