Code Window Demo
<div>Count: ((count))</div>
<button x-on:click="x.store.count++">+</button>
<button x-on:click="x.store.count--">-</button>
<h1>((title))</h1>
<p>((content))</p>
<script>
x.store.title = "Hello Extra.js"
x.store.content = "Welcome to extra.js code window demo!"
</script>
- ((product.name)) - $((product.price))
<ul x-for="product in products">
<li>((product.name)) - $((product.price))</li>
</ul>
<button x-on:click="x.store.products.push({name: 'New Product', price: 10.00})">
+ New Product
</button>
<script>
x.store.products = [
{ name: "Product 1", price: 29.99 },
{ name: "Product 2", price: 49.99 },
]
</script>
Count: ((count))
Double: ((countDouble))
* x.watch is on see console.log
<div>
Count: ((count))
Double: ((countDouble))
</div>
<button x-on:click="x.store.count++">+</button>
<button x-on:click="x.store.count--">-</button>
<script>
x.store.count = 0
x.computed("countDouble", () => x.store.count * 2)
x.watch("count", (nv, ov) => {
console.log("count changed:", ov, "→", nv)
})
</script>
Loading...
<div x-load="remote.html" x-load:target="#remoteContent" >
Load Page (onload)
</div>
<button x-load="remote.html" x-load:target="#remoteContent" x-load:on="click">
Open Page (onclick)
</buttin>