ui-bind референт: всяка команда, опция и атрибут

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

<ui-bind> е елементът, който прилага команд към DOM, когато стойността на пътя му се променя.На тази страница се изброява какво прави всяка команда, опциите, които решават кога тя работи и атрибутите, които избират какъв елемент тя се променят.

Форматът е config="command:expression;command:expression". В израз value е стойността на пътя, а element (също el) е елементът, който се променя. Командата може да има селектор (text .name:value я прилага към елементите .name вътре), а attr взема първо името на атрибута (attr title:value).

Команди, които променят елемента

Команда	Какво прави
`text:expr`	задава текста; празна стойност показва текста на `empty`
`html:expr`	задава вътрешния HTML (екранирайте го сами)
`value:expr`	задава стойността на контрол във формуляр
`title:expr`, `href:expr`, `src:expr`	задава този атрибут
`attr name:expr`	задава всеки атрибут
`.class:expr`	добавя класа, когато изразът е истина, и го премахва, когато е лъжа
`show:expr` / `hide:expr`	добавя или премахва класа `hidden`
`visible:expr` / `invisible:expr`	добавя или премахва класа `invisible` (елементът запазва мястото си)
`checked:expr`	отмята или премахва отметката на `input` вътре
`disabled:expr` / `enabled:expr`	забранява или разрешава контролите вътре (`input`, `select`, `textarea`, `button`) и елементите `ui-component` вътре
`required:expr`	задава опцията `required` на елементите `ui-component` вътре (не докосва обикновен `input`)
`template`	рендира Tangular шаблона на елемента (вижте рецептата за шаблони)
`exec:path` / `refresh:path`	извиква функцията на този път със стойността, пътя и елемента, при всяко `SET` на пътя на binder

show и hide се изпълняват първи, после visible и invisible, а text, html и template последни, така че видимостта на елемента да е известна, когато се записва съдържанието. text, html и template се записват само докато елементът е видим, освен ако forcerender:true не е в същата конфигурация: тогава се записват дори когато елементът е скрит.

Опции: кога се изпълняват командите

Опция	Какво прави
`changes`	пропуска актуализацията, когато стойността е същата като последната
`strict`	изпълнява се само когато самият път на binder се е променил, не когато се е променил дъщерен път (`user.name` не изпълнява binder на `user`)
`track:a,b`	изпълнява се само когато един от тези пътища се е променил (binder на `user`, който следи `user.name`, игнорира `user.age`); изпълнява се отново при всяко `SET` на следен път, дори със същата стойност
`once`	изпълнява се веднъж и после binder се премахва
`check:path`	извиква функцията на този път с `(value, path, element)`; командите се изпълняват само когато върне true
`delay:ms`	изчаква толкова милисекунди и рендира веднъж, дори стойността да се е променила няколко пъти междувременно (100, когато не е зададена стойност)
`empty:text`	текстът, показван вместо празна стойност (`---`, когато не е зададен текст)
`format:pattern`	форматира стойността на `text`, `html`, `value`, `attr`, `title`, `href` и `src` с `String.format`
`class:name`	добавя този клас към елемента `ui-bind` веднъж, след първото рендиране
`assign:path`	съхранява инстанцията на binder на този път
`helpers:path`	обектът на този път предоставя помощниците на шаблона: с `helpers:hh` и `hh = { shout: fn }` шаблонът може да използва `{{ value`	shout() }}

Атрибути: кой елемент се променя

По подразбиране командите променят елемента ui-bind. Тези атрибути избират друг:

element="#target" всеки елемент на страницата (jQuery селектор)
child=".inner" елемент вътре в ui-bind
parent=".card" най-близкият предшественик, който съвпада

Пътят може да започва с ! (path="!user.nick"): тогава binder игнорира моментите, когато стойността е null или undefined. Името на команда също може да започва с ! или ~: префиксът се приема и игнорира, командата работи като без него.

Атрибути на команди

Използвайте един атрибут на команда: пишете title:value и alt:value като две команди.

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>
	<ui-bind path="user.age" config="visible:value > 17" id="visible"><span>adult</span></ui-bind>
	<ui-bind path="user.age" config="invisible:value > 17" id="invisible"><span>minor</span></ui-bind>
	<ui-bind path="user.name" config="text:value;class:marked" id="classonce"></ui-bind>
	<ui-bind path="user.name" config="text:(window.counter_changes = (window.counter_changes || 0) + 1) && value;changes" id="changes"></ui-bind>
	<ui-bind path="user" config="text:(window.counter_strict = (window.counter_strict || 0) + 1);strict" id="strict"></ui-bind>
	<ui-bind path="user" config="text:value.name;track:user.name" id="track"></ui-bind>
	<ui-bind path="user.name" config="text:value;once" id="once"></ui-bind>
	<ui-bind path="user.name" config="text:value;check:isready" id="check"></ui-bind>
	<ui-bind path="user.name" config="exec:onname" id="exec"></ui-bind>
	<ui-bind path="user.name" config="text:value;assign:binders.main" id="assign"></ui-bind>
	<ui-bind path="!user.nick" config="text:value" id="notnull"></ui-bind>
	<ui-bind path="user.name" config="text:value" element="#target" id="element"></ui-bind>
	<div id="target"></div>
	<ui-bind path="user.name" config="text:value" child=".inner" id="child"><b class="inner"></b></ui-bind>
	<ui-bind path="user.name" config="text .a:value;text .b:value.toUpperCase()" id="selector"><i class="a"></i><i class="b"></i></ui-bind>
	<ui-bind path="user.name" config="show:false;text:value;forcerender:true" id="force"></ui-bind>
	<ui-bind path="user.name" config="show:false;text:value" id="noforce"></ui-bind>
	<ui-bind path="user.admin" config="required:value;disabled:!value" id="flags"><input type="text" /></ui-bind>
	<ui-bind path="user.admin" config="checked:value" id="checked"><input type="checkbox" /></ui-bind>

	<ui-bind path="user.name" config="title+alt:value" id="clone"></ui-bind>
	<ui-bind path="user" config="text:(window.counter_track = (window.counter_track || 0) + 1);track:user.name" id="track2"></ui-bind>
	<ui-bind path="user.name" config="template;helpers:hh" id="helpers"><script type="text/html"><b>{{ value | shout() }}</b></script></ui-bind>
	<ui-bind path="user.none" config="text:value;empty" id="emptydef"></ui-bind>
	<ui-bind path="user.name" config="focus"><input type="text" id="f1" /></ui-bind>
	<ui-bind path="user.name" config="!text:value" id="bang"></ui-bind>
	<ui-bind path="user.name" config="~text:value" id="tilde"></ui-bind>
	<ui-bind path="user.name" config="text:el.attr('id') + '/' + element.attr('id')" id="elvar"></ui-bind>
	<div class="card"><ui-bind path="user.name" config="attr data-n:value" parent=".card" id="parentbind"></ui-bind></div>

	<script>
		window.hh = { shout: s => String(s).toUpperCase() };
		window.isready = function(value, path, element) {
			return value !== 'blocked';
		};
		window.exec_log = [];
		window.onname = function() {
			window.exec_log.push(Array.prototype.slice.call(arguments).map(a => typeof a === 'object' ? (a && a.nodeType ? 'element' : a && a.path ? 'path' : 'object') : String(a)).join('|'));
		};
		SET('user', { name: 'Ann', age: 30, admin: false });
	</script>

</body>
</html>

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

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

Код

Преглед