Pierwsze kroki z jComponent 20

jComponent 20 · jcomponent@20 jcomponentfrontendbinding Uruchomiono z jComponent 20

jComponent 20 to jeden plik (spa.min@20.js), który zawiera już jQuery. Utrzymuje globalny obiekt stanu: zapisujesz do niego przez SET(path, value), czytasz przez GET(path), a elementy reagują na zmiany. Bundle zawiera też arkusz stylów spa.min@20.css z czcionką ikon Total.js.

<ui-bind> wiąże element ze ścieżką w stanie. Atrybut config wymienia komendy rozdzielone średnikami; text:value ustawia tekst elementu na wartość ścieżki. Załaduj oba z CDN, tak jak robi to każdy przykład na tej stronie: <script src="//cdn.componentator.com/spa.min@20.js"></script> i <link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />. Jeśli chcesz tylko ikony, załaduj samo //cdn.componentator.com/icons.min.css (skrypt nie jest potrzebny). Testy na tej stronie odpowiadają na żądania spa.min@20.js i spa.min@20.css lokalną kopią tej samej wersji i nie ładują pliku z ikonami.

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>

Wywołaj ponownie SET('user.name', 'Louis'), a nagłówek zmieni się bez żadnego Twojego kodu DOM.

Wypróbuj w przeglądarce

Edytuj przykład i uruchom go. Działa w izolowanej ramce w Twojej przeglądarce; nic nie jest wysyłane na nasz serwer.

Kod

Podgląd