Začíname s jComponent 20

jComponent 20 · jcomponent@20 jcomponentfrontendbinding Spustené s jComponent 20

jComponent 20 je jediný súbor (spa.min@20.js), ktorý už obsahuje jQuery. Udržiava globálny objekt stavu: zapisuješ cez SET(path, value), čítaš cez GET(path) a elementy reagujú na zmeny. Balík obsahuje aj štýly spa.min@20.css s ikonovým fontom Total.js.

<ui-bind> viaže element na cestu v stave. Atribút config obsahuje príkazy oddelené bodkočiarkou; text:value nastaví text elementu na hodnotu cesty. Načítajte oba súbory z CDN, ako to robí každý príklad na tomto webe: <script src="//cdn.componentator.com/spa.min@20.js"></script> a <link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />. Ak chcete iba ikony, načítajte len //cdn.componentator.com/icons.min.css (skript nie je potrebný). Kontroly na tomto webe odpovedajú na požiadavky na spa.min@20.js a spa.min@20.css lokálnou kópiou rovnakej verzie a súbor s ikonami nenačítavajú.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>

	<h1>Hello <ui-bind path="user.name" config="text:value"></ui-bind></h1>

	<script>
		SET('user.name', 'Peter');
	</script>

</body>
</html>

Zavolaj znova SET('user.name', 'Louis') a nadpis sa zmení bez toho, aby si napísal akýkoľvek kód pre DOM.

Vyskúšajte to vo svojom prehliadači

Upravte príklad a spustite ho. Beží v izolovanom ráme vo vašom prehliadači; na náš server sa nič neposiela.

Kód

Náhľad