Első lépések a jComponent 20-szal

jComponent 20 · jcomponent@20 jcomponentfrontendbinding Futtatva a jComponent 20-szal

A jComponent 20 egyetlen fájl (spa.min@20.js), amely már tartalmazza a jQuery-t. Globális állapot objektumot tart: az SET(path, value)-vel írsz bele, a GET(path)-tel olvasod, és az elemek reagálnak a változásokra. A csomagban van egy stíluslap is, a spa.min@20.css, a Total.js ikonbetűtípussal.

A <ui-bind> egy elemet köt az állapot egy útvonalához. A config attribútum pontosvesszővel tagolt parancsokat sorol fel; a text:value az elem szövegét az útvonal értékére állítja. Tölts be mindkettőt a CDN-ről, ahogy az oldal minden példája teszi: <script src="//cdn.componentator.com/spa.min@20.js"></script> és <link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />. Ha csak az ikonokat szeretnéd, csak ezt töltsd be: //cdn.componentator.com/icons.min.css (szkript nem kell hozzá). Az oldal ellenőrzései a spa.min@20.js és a spa.min@20.css kéréseire ugyanannak a verziónak a helyi másolatával válaszolnak, és az ikonfájlt nem töltik be.

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>

Hívd meg újra a SET('user.name', 'Louis')-t, és a címsor megváltozik a te DOM-kódod nélkül.

Próbáld ki a böngésződben

Szerkeszd a példát, és futtasd. A böngésződ egy izolált keretében fut; semmi nem kerül a szerverünkre.

Kód

Előnézet