xxdom

xxdom Example code

by jensh

HTML

<script src="https://cdn.jsdelivr.net/npm/xxdom"></script>

{{'Hello World!'}}
Hello {{ world + '!' }} <br>
Today is: {{ (new Date).toDateString() }}.

<div xx-scope="{ x:'local X'}">
	Access local var x = {{x}}<br>
	Access global var world = {{world}}
</div>

Hello <span xx-text="world"></span><span xx-text="'!'"></span>

<ul>
	<li xx-for="item of things.slice(0).reverse()">
		The {{item.name}} is
		<span xx-style="{color: (item.color)}" xx-text="item.color"></span>.
	</li>
</ul>

<div xx-scope="{ isCool: true }">
	Criss-Cross <span xx-if="isCool">is cool!</span>
</div>

<div xx-scope="{ isSelected: true, acolor: 'blue' }">
	<div xx-style="{width: '300px', color: acolor}" xx-class="{ selected: isSelected }">
		Criss-Cross
	</div>
</div>

<div>{{cnt}} It is: {{ new Date }}</div>

<script>
var world = "world";
var things = [
	{ name: 'banana', color: 'blue' },
	{ name: 'fox', color: 'brown'},
	{ name: 'ball', color: 'red' },
];
var cnt = 0;
setInterval(function () {
	cnt++;
	xx(); // Update every second.
}, 1000);
</script>