# j-Editable

> Ez az összetevő szerkeszthető osztályú minden elemet. adatköteles vagy dinamikus értékekkel működik.

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

Ez az összetevő a `editable` osztályú összes elemet szerkesztheti. `data-bind` vagy dinamikus értékekkel működik.

__konfiguráció__:

- `autofocus` {Boolean} az első elemre összpontosít (default: `false`)
- `validate` {Boolean} nem engedélyezheti a validációt (default: `true`)
- `disabled` {Boolean} lehet letiltani a szerkesztés (ez hozzáteszi a `ui-editable-disabled` és a `ui-editable-enabled` osztályok), alapértelmezett: `false`
- `changed` {String} opcionális, a módszerhez vagy úthoz való link --> csak változó értékekkel tartalmazza az objektumot
- `enter` {String} opcionális, egy link a módszerhez `method(path, value, el)`a módszer végrehajtása, ha a felhasználó nyomja `ENTER`
- `escape` {String} opcionális, egy link a módszerhez `method(path, value, el)`a módszer végrehajtása, ha a felhasználó nyomja `ESC`
- `can` {String} opcionális, egy link a módszerhez `method(opt, el)` Visszatérni kell `boolean`Ez azt jelenti, `can edit?`
- `error` {String} opcionális, a `method(el, isInvalid, meta)` módszerhez való linket akkor értékelik, ha az elem nem érvényes, és fordítva.
- __NEW__ `class {String}` opcionális, az osztály neve a `ui-editable-CLASS` űrlapban szerepel (előzetes: `default`)

---

A `data-editable` tulajdonság a viselkedés leírását írja le:

- `path` {String} egy __relatív út__ a tulajdonság (a `data-bind` automatikusan örökölhető)
- `required` {Boolean} opcionális, lehetővé teszi a „követelt” (default: `false`)
- `type` {String} opcionális, lehet `string` (default), `date`, `number`, `boolean`, `email` vagy `html` __NEW__ `tags`
- `can` {String} opcionális, egy út a `function(opt, el)` vissza kell `boolean`, ez azt jelenti, hogy `can edit?`
- `save` Választható, egy út a `function(opt, accepted(boolean))`, `accepted` A funkciót értékelni kell
- `format` {String} opcionális, a `date` formátum, alapértelmezett: `yyyy-MM-dd`
- `dirsource` {String} opcionális, az adatforráshoz vezető út
- `dircustom` {String/Boolean} opcionális, tartalmazhat egy utat a `function(val, next(new_val))` vagy lehet `Boolean`. Ez az opció lehetővé teszi a hozzáadott értéket (érték nem meghatározott adatforrás)
- `dirrender` {String} opcionális, egy út a `function(item, text)` (a `j-Directory` HTML-t vissza kell adni), ez a funkció befolyásolhatja az elemek listáját a `j-Directory`
- `dirminwidth` {Number} opcionális, minimum szélesség a `j-Directory`, alapértelmezett: `200`
- `dirmaxwidth` {Number} opcionális, a maximális szélesség a `j-Directory`
- `dirplaceholder` {String} opcionális, egy helytartó a `j-Directory`
- `dirempty` {String} opcionális, üres mezőt ad a `j-Directory` számára
- `dirkey` {String} opcionális, a `text` olvasásához szükséges kulcsszavak a `dirsource`-ben (előzetes: `name`)
- `dirvalue` {String} opcionális, a `value` olvasásához szükséges kulcsszavak a `dirsource`-ben (előzetes: `id`)
- `dirsearch` {Boolean} opcionális, nem engedélyezhető a keresés a `j-Directory`
- `autosource` {String} a `search` funkcióhoz vezető út a `autocomplete`, `function(search, render(arr))`
- `autovalue` {String} az értéket a `autosource`
- `maxlength` {Number} egy maxhossz
- `minvalue` {Number} egy min. értéke a szám típusa (default: `undefined`)
- `maxvalue` {Number} a maximális érték a szám típus (default: `undefined`)
- `rebind` {Boolean} ha a `true` csak a `data-bind` elemet kötődik (elsődleges: `0`)
- `validate` {String} opcionális, az érték érvényesítésének feltétele, tartalmazhat egy linket a `function(value)` vagy `!!value.match(/[a-z]+/)`
- `multiline` {Boolean} opcionális, lehetővé teszi multiline + appends osztály `editable-multiline` (`inline-block` + `width:100%`) amikor szerkesztés (default: `false`)
- `raw` {Boolean} opcionális, amikor `true` akkor a jelenlegi HTML tartalma lesz, mint egy helytartó, ha az érték `nullable` (default: `true`)
- `accept` {String} opcionális, az érték elfogadásának feltétele, tartalmazhat egy linket a `function(value)` vagy `!!value.match(/[a-z]+/)` hasonló a `validate`
- `empty` {String} opcionális, üres értéket engedélyez, és tartalmazhat üres címke vagy `1` vagy `true` az automatikus `rebind` kötődés
- `invalid` {String} opcionális, a `method(el, isInvalid, meta)` módszerhez való linket akkor értékelik, ha az elem nem érvényes, és fordítva.

__módszerek__:

- __NEW__: `component.changed()` visszatér egy módosított adatot tartalmazó objektumhoz

__Jó tudni__:

- ha a felhasználó néhány `key` nyomást, akkor a szerkeszthető elem tartalmazza a `keypressed` osztály, amíg nem hagyja el a vezérlő
- Minden változó elem tartalmazza a `changed` osztályot
- Ha az összetevő változtat néhány értéket, a fő elem tartalmazza a `ui-editable-changed` osztály
- ha a `data-bind` és a `empty`-es elemet tartalmazza, akkor a fókusz után törlődik.
- Új támogatás `tags` Mostantól csak a támogatás `rebind` és `data-bind`(Az adatok összekapcsolása `template` A `{jQuery selector}` Munkák a `+v18`)
- __NEW__ ha az elem (__ vagy a szülő, vagy a szülők__) tartalmazza a `data-disabled="1"` attribútumot, a vezérlés kikapcsolódik
- __NEW__ rejtett és törölt elemek nem érvényesülnek

Használja a `<ui-component name="editable">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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