# ui-bind αναφορά: κάθε εντολή, επιλογή και χαρακτηριστικό

> Όλες οι εντολές ui-bind με αυτό που κάνει ο καθένας, τις επιλογές που ελέγχουν όταν τρέχει, και τα χαρακτηριστικά που επιλέγουν το στοιχείο στόχου.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: decb6e468faa27c3707b5edea2c88ac862e804b3a0ecfa023a32b55ecd95d7e3
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

Το `<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` ως δύο εντολές.**

```html 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>
```