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 (κάντε μόνοι σας το escape)
`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>

Δοκιμάστε το στον browser σας

Επεξεργαστείτε το παράδειγμα και εκτελέστε το. Εκτελείται σε απομονωμένο πλαίσιο στον browser σας· τίποτα δεν στέλνεται στον διακομιστή μας.

Κώδικας

Προεπισκόπηση