# j-Editable

> Αυτό το συστατικό μπορεί να επεξεργαστεί όλα τα στοιχεία με τη μορφή που μπορεί να τροποποιηθεί. λειτουργεί με δεδομένα-συνδεδεμένες ή δυναμικές τιμές.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 9a58131a6f85e7f6d95f3a1839c370a02a79ab3f32037343b4c46303f343f2a8
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Αυτό το συστατικό μπορεί να επεξεργαστεί όλα τα στοιχεία με την κατηγορία `editable`. λειτουργεί με τις τιμές `data-bind` ή δυναμική.

__ΕΠΙΤΡΟΦΗ__:

- `autofocus` {Boolean} επικεντρώνεται στο πρώτο στοιχείο (προεπιλεγμένο: `false`)
- `validate` {Boolean} μπορεί να απενεργοποιήσει την επικύρωση (προεπιλεγμένη: `true`)
- `disabled` {Boolean} μπορεί να απενεργοποιήσει την επεξεργασία (το προσθέτει τις τάξεις `ui-editable-disabled` και `ui-editable-enabled`), προεπιλογή: `false`
- `changed` {String} προαιρετική, μια σύνδεση με μια μέθοδο ή μονοπάτι --> θα περιέχει το αντικείμενο με αλλαγές μόνο
- `enter` {String} προαιρετική, μια σύνδεση με μια μέθοδο `method(path, value, el)`, η μέθοδος εκτελείται εάν ο χρήστης πιέζει `ENTER`
- `escape` {String} προαιρετική, μια σύνδεση με μια μέθοδο `method(path, value, el)`, η μέθοδος εκτελείται εάν ο χρήστης πιέζει `ESC`
- `can` {String} προαιρετική, μια σύνδεση με τη μέθοδο `method(opt, el)` Πρέπει να επιστρέψουμε `boolean`Αυτό σημαίνει `can edit?`
- `error` {String} προαιρετική, ένας σύνδεσμος με τη μέθοδο `method(el, isInvalid, meta)` αξιολογείται όταν το στοιχείο είναι αναποτελεσματικό και αντίστροφα
- __NEW__ `class {String}` προαιρετικά, προσθέτει ένα όνομα τάξης στη φόρμα `ui-editable-CLASS` (προεπιλεγμένο: `default`)

---

Το χαρακτηριστικό `data-editable` περιγράφει τη συμπεριφορά:

- `path` {String} ένα __ σχετικό μονοπάτι__ στην ιδιοκτησία (μπορεί να κληρονομηθεί από το `data-bind` αυτόματα)
- `required` {Boolean} προαιρετική, επιτρέπει "αναγκαία" (προεπιλεγμένη: `false`)
- `type` {String} επιλογή, μπορεί να είναι `string` (επιλεγμένη), `date`, `number`, `boolean`, `email` ή `html` __NEW__ `tags`
- `can` Διάλογος, ένας δρόμος για `function(opt, el)` Πρέπει να επιστρέψουμε `boolean`Αυτό σημαίνει `can edit?`
- `save` {String} προαιρετική, ένα μονοπάτι προς το `function(opt, accepted(boolean))`, η λειτουργία `accepted` πρέπει να αξιολογηθεί
- `format` {String} προαιρετική, μια μορφή για `date`, προεπιλεγμένη: `yyyy-MM-dd`
- `dirsource` {String} προαιρετική, ο δρόμος προς μια πηγή δεδομένων
- `dircustom` {String/Boolean} προαιρετική, μπορεί να περιέχει μια διαδρομή προς `function(val, next(new_val))` ή μπορεί να είναι `Boolean`. Αυτή η επιλογή μπορεί να επιτρέπει την προσθήκη μιας προσαρμοσμένης αξίας (η αξία δεν ορίζεται στην πηγή δεδομένων)
- `dirrender` {String} προαιρετικό, ένα μονοπάτι προς `function(item, text)` (πρέπει να επιστρέψει το HTML για `j-Directory`), αυτή η λειτουργία μπορεί να επηρεάσει τη λίστα των στοιχείων στο `j-Directory`
- `dirminwidth` {Αριθμός} επιλογή, ελάχιστη πλάτος για `j-Directory`, προεπιλεγμένη: `200`
- `dirmaxwidth` {Αριθμός} προαιρετική, μέγιστη πλάτος για `j-Directory`
- `dirplaceholder` {String} προαιρετικά, ένας κάτοχος για το `j-Directory`
- `dirempty` {String} προαιρετικά, προσθέτει ένα κενό πεδίο για το `j-Directory`
- `dirkey` {String} προαιρετικό, ένα κλειδί για την ανάγνωση του `text` στο `dirsource` (προεπιλεγμένο: `name`)
- `dirvalue` {String} προαιρετικό, ένα κλειδί για την ανάγνωση του `value` στο `dirsource` (προεπιλεγμένο: `id`)
- `dirsearch` {Boolean} προαιρετική, μπορεί να απενεργοποιηθεί η αναζήτηση για `j-Directory`
- `autosource` {String} ένα μονοπάτι για τη λειτουργία `search` σε `autocomplete`, `function(search, render(arr))`
- `autovalue` {String} ένα μονοπάτι ιδιοκτησίας για την αξία στο `autosource`
- `maxlength` Μία μακράς διάρκειας
- `minvalue` {Συνολικά} μια ελάχιστη τιμή για τον τύπο αριθμού (προεπιλογή: `undefined`)
- `maxvalue` {Συνολικά} μέγιστη τιμή για τον τύπο αριθμού (προεπιλογή: `undefined`)
- `rebind` {Boolean} εάν το `true` ανασυνδέει το `data-bind` μόνο σε αυτό το στοιχείο (προεπιλεγμένο: `0`)
- `validate` {String} προαιρετική, προϋπόθεση για την επικύρωση της αξίας, μπορεί να περιέχει σύνδεση με `function(value)` ή `!!value.match(/[a-z]+/)`
- `multiline` {Boolean} προαιρετική, επιτρέπει multiline + προσθήκη τάξη `editable-multiline` (`inline-block` + `width:100%`) όταν είναι επεξεργασία (προεπιλεγμένη: `false`)
- `raw` {Boolean} προαιρετική, όταν `true` τότε το τρέχον περιεχόμενο HTML θα είναι ως κάτοχος τοποθεσίας εάν η τιμή είναι `nullable` (προεπιλεγμένη: `true`)
- `accept` {String} προαιρετική, μια προϋπόθεση για την αποδοχή της αξίας, μπορεί να περιέχει σύνδεση με `function(value)` ή `!!value.match(/[a-z]+/)` είναι παρόμοια με `validate`
- `empty` {String} προαιρετική, επιτρέπει κενή τιμή και μπορεί να περιέχει κενό ετικέτα ή `1` ή `true` για αυτο-`rebind` του συνδέσμου
- `invalid` {String} προαιρετική, ένας σύνδεσμος με τη μέθοδο `method(el, isInvalid, meta)` αξιολογείται όταν το στοιχείο είναι αναποτελεσματικό και αντίστροφα

__Μέθοδοι__:

- __NEW__: Το `component.changed()` επιστρέφει ένα αντικείμενο με άλλα δεδομένα

__Καλό να ξέρεις__:

- Εάν ο χρήστης πιέσει κάποια `key`, τότε το επεξεργαστικό στοιχείο θα περιέχει την τάξη `keypressed` όσο δεν έχουν αφήσει τον έλεγχο.
- Κάθε μεταβλητό στοιχείο θα περιέχει κλάση `changed`
- Εάν το στοιχείο αλλάξει ορισμένες τιμές, το κύριο στοιχείο θα περιέχει την κατηγορία `ui-editable-changed`
- Εάν το στοιχείο έχει `data-bind` με `empty`, θα καθαριστεί μετά την εστίαση
- __NEW__ υποστηρίζει τώρα τον τύπο `tags`. για το παρόν υποστηρίζει μόνο με `rebind` και `data-bind`. (δεδο-συνδεδεμένο `template` με `{jQuery selector}` λειτουργεί από `+v18`)
- __NEW__ εάν το στοιχείο (__ή γονέας, ή γονέος του γονέα__) περιέχει χαρακτηριστικό `data-disabled="1"`, ο έλεγχος θα απενεργοποιηθεί
- __NEW__ κρυμμένα και απενεργοποιημένα στοιχεία δεν θα επικυρωθούν

Χρησιμοποιήστε το με `<ui-component name="editable">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

```html example.html
<style>
	.changed {}
	.changed::after { float: right; content: '+'; margin-left: 5px; font-weight: normal; color: orange; }
</style>

<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY directory"></ui-component>

<ui-component name="editable" path="form">
	<div style="width:500px;padding:10px;border:1px solid #E0E0E0">

		<div class="row">
			<div class="col-xs-3">
				Name:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.name" config="html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Email:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.email" config="html" class="editable block" data-editable="required:1;type:email"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Nickname:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.nickname" config="empty:Nickname;html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Framework:
			</div>
			<div class="col-xs-9">
				<ui-bind class="editable block" config="html;empty:Choose a framework;change:renderframework" path="form.frameworkid" data-editable="dirsource:frameworks;"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Country:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.countries" config="template:{#countrytags}" class="editable block" data-editable="rebind:1;dirsource:countries;type:tags"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Date:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.date" config="html:(new Date() || value).format('yyyy-MM-dd')" class="editable block" data-editable="type:date"></ui-bind>
			</div>
		</div>
	</div>
	<pre><ui-bind path="form" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-component>

<script type="text/html" id="countrytags">
	{{ foreach m in value }}<span class="editable-tag"><i class="ti ti-times"></i>{{ m }}</span>{{ end }}
</script>


<script>

	// Alternative to tags (ui-bind path="path" config="change:myfunc")
	function myfunc(data, path, el) {
		if (!data)
			return el.html('');
		var template = '<span class="tag"><i class="ti ti-times"></i>{0}</span>';
		var html = '';
		for (var i = 0; i < data.length; i++)
			html += template.format(data[i]);
		el.html(html);
	}

	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var countries = ['Slovakia', 'Poland', 'Hungary', 'Germany', 'USA', 'Austria', 'Poland', 'Czechia'];
	var form = {};
	form.date = new Date();
	form.name = 'Peter Širka';
	form.countries = ['Slovakia', 'Hungary'];
	form.frameworkid = 0;

	function renderframework(value, path, el) {
		return value ? frameworks.findValue('id', value, 'name', DEF.empty) : DEF.empty;
	}

</script>
```