ui-bind-Referenz: jeder Befehl, jede Option und jedes Attribut

jComponent 20 · jcomponent@20 jcomponentfrontendbindingreference Mit jComponent 20 ausgeführt

<ui-bind> ist das Element, das befehlen auf den DOM anwendet, wenn der Wert seiner Route sich ändert. Diese Seite enthält, was jede Befehl tut, die Optionen, die entscheiden wenn es läuft und die Attribute, die wählen die Elemente es ändern.

Das Format ist config="command:expression;command:expression". In einem Ausdruck ist value der Wert des Pfads und element (auch el) das Element, das geändert wird. Ein Befehl kann einen Selektor haben (text .name:value wendet ihn auf die Elemente .name darin an) und attr nimmt zuerst den Attributnamen (attr title:value).

Befehle, die das Element ändern

Befehl	Was er tut
`text:expr`	setzt den Text; ein leerer Wert zeigt den Text von `empty`
`html:expr`	setzt das innere HTML (escape es selbst)
`value:expr`	setzt den Wert eines Formularelements
`title:expr`, `href:expr`, `src:expr`	setzt dieses Attribut
`attr name:expr`	setzt ein beliebiges Attribut
`.class:expr`	fügt die Klasse hinzu, wenn der Ausdruck wahr ist, und entfernt sie, wenn er falsch ist
`show:expr` / `hide:expr`	fügt die Klasse `hidden` hinzu oder entfernt sie
`visible:expr` / `invisible:expr`	fügt die Klasse `invisible` hinzu oder entfernt sie (das Element behält seinen Platz)
`checked:expr`	setzt oder entfernt den Haken des darin liegenden `input`
`disabled:expr` / `enabled:expr`	deaktiviert oder aktiviert die darin liegenden Steuerelemente (`input`, `select`, `textarea`, `button`) und die darin liegenden `ui-component`-Elemente
`required:expr`	setzt die Option `required` der darin liegenden `ui-component`-Elemente (ein einfaches `input` bleibt unberührt)
`template`	rendert das Tangular-Template des Elements (siehe das Template-Rezept)
`exec:path` / `refresh:path`	ruft die Funktion an diesem Pfad mit dem Wert, dem Pfad und dem Element auf, bei jedem `SET` des Pfads des Binders

show und hide laufen zuerst, dann visible und invisible, und text, html und template zuletzt, damit die Sichtbarkeit des Elements schon bekannt ist, wenn der Inhalt geschrieben wird. text, html und template werden nur geschrieben, solange das Element sichtbar ist, außer forcerender:true steht in derselben Konfiguration: Dann werden sie auch bei verborgenem Element geschrieben.

Optionen: wann die Befehle laufen

Option	Was sie tut
`changes`	überspringt die Aktualisierung, wenn der Wert derselbe wie der letzte ist
`strict`	läuft nur, wenn sich der Pfad des Binders selbst geändert hat, nicht wenn sich ein Kindpfad geändert hat (`user.name` führt keinen Binder von `user` aus)
`track:a,b`	läuft nur, wenn sich einer dieser Pfade geändert hat (ein Binder von `user`, der `user.name` verfolgt, ignoriert `user.age`); läuft bei jedem `SET` eines verfolgten Pfads erneut, auch mit demselben Wert
`once`	läuft einmal und dann wird der Binder entfernt
`check:path`	ruft die Funktion an diesem Pfad mit `(value, path, element)` auf; die Befehle laufen nur, wenn sie true zurückgibt
`delay:ms`	wartet so viele Millisekunden und rendert einmal, auch wenn sich der Wert inzwischen mehrmals geändert hat (100, wenn kein Wert angegeben ist)
`empty:text`	der Text, der anstelle eines leeren Wertes angezeigt wird (`---`, wenn kein Text angegeben ist)
`format:pattern`	formatiert den Wert von `text`, `html`, `value`, `attr`, `title`, `href` und `src` mit `String.format`
`class:name`	fügt diese Klasse dem Element `ui-bind` einmal nach dem ersten Rendern hinzu
`assign:path`	speichert die Binder-Instanz an diesem Pfad
`helpers:path`	das Objekt an diesem Pfad liefert die Helfer des Templates: mit `helpers:hh` und `hh = { shout: fn }` kann das Template `{{ value`	shout() }} verwenden

Attribute: welches Element sich ändert

Standardmäßig ändern die Befehle das Element ui-bind. Diese Attribute wählen ein anderes:

element="#target" ein beliebiges Element der Seite (ein jQuery-Selektor)
child=".inner" ein Element innerhalb des ui-bind
parent=".card" der nächste passende Vorfahre

Der Pfad kann mit ! beginnen (path="!user.nick"): Der Binder ignoriert dann die Momente, in denen der Wert null oder undefined ist. Ein Befehlsname kann auch mit ! oder ~ beginnen: Das Präfix wird akzeptiert und ignoriert, der Befehl funktioniert wie ohne.

Attribute Befehl

Verwenden Sie ein Attribut pro Befehl: Schreiben Sie title:value und alt:value als zwei Befehle.

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>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau