Първи стъпки с jComponent 20

jComponent 20 · jcomponent@20 jcomponentfrontendbinding Изпълнено с jComponent 20

jComponent 20 е един-единствен файл (spa.min@20.js), който вече съдържа jQuery. Той поддържа глобален обект на състоянието: пишете в него със SET(path, value), четете от него с GET(path), а елементите реагират на промените. Пакетът има и таблица със стилове, spa.min@20.css, с шрифта за икони на Total.js.

<ui-bind> свързва елемент с път в състоянието. Атрибутът config изброява команди, разделени с точка и запетая; text:value задава текста на елемента на стойността на пътя. Заредете двата от CDN, както прави всеки пример на този сайт: <script src="//cdn.componentator.com/spa.min@20.js"></script> и <link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />. Ако искате само иконите, заредете само //cdn.componentator.com/icons.min.css (не е нужен скрипт). Проверките на този сайт отговарят на заявките за spa.min@20.js и spa.min@20.css с локално копие на същата версия и не зареждат файла с иконите.

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>

Извикайте отново SET('user.name', 'Louis') и заглавието се променя без никакъв ваш DOM код.

Опитайте в браузъра си

Редактирайте примера и го изпълнете. Работи в изолирана рамка във вашия браузър; нищо не се изпраща към нашия сървър.

Код

Преглед