První kroky s jComponent 20

jComponent 20 · jcomponent@20 jcomponentfrontendbinding Spuštěno s jComponent 20

jComponent 20 je jediný soubor (spa.min@20.js), který už obsahuje jQuery. Udržuje globální objekt stavu: zapisuješ do něj přes SET(path, value), čteš přes GET(path) a elementy reagují na změny. Bundle obsahuje i styly spa.min@20.css s ikonovým fontem Total.js.

<ui-bind> váže element na cestu ve stavu. Atribut config obsahuje příkazy oddělené středníky; text:value nastaví text elementu na hodnotu cesty. Načtěte oba soubory z CDN, jako to dělá každý příklad na tomto webu: <script src="//cdn.componentator.com/spa.min@20.js"></script> a <link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />. Pokud chcete jen ikony, načtěte pouze //cdn.componentator.com/icons.min.css (skript není potřeba). Kontroly na tomto webu odpovídají na požadavky na spa.min@20.js a spa.min@20.css lokální kopií stejné verze a soubor s ikonami nenačítají.

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>

Zavolej znovu SET('user.name', 'Louis') a nadpis se změní, aniž bys napsal jakýkoli kód pro DOM.

Vyzkoušejte to ve svém prohlížeči

Upravte příklad a spusťte ho. Běží v izolovaném rámu ve vašem prohlížeči; na náš server se nic neposílá.

Kód

Náhled