# j-Editable

> Deze component kan alle elementen bewerken met een bewerkbare klasse. het werkt met data-bind of dynamische waarden.

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

Deze component kan alle elementen bewerken met de `editable`-klasse. het werkt met `data-bind` of dynamische waarden.

__Configuratie__:

- `autofocus` {Boolean} richt zich op het eerste item (default: `false`)
- `validate` {Boolean} kan de validatie ontgrendelen (default: `true`)
- `disabled` {Boolean} kan bewerken (dit voegt de `ui-editable-disabled` en `ui-editable-enabled` klassen toe), standaard: `false`
- `changed` {String} optioneel, een link naar een methode of pad --> het bevat het object met veranderde waarden alleen
- `enter` {String} optioneel, een link naar een methode `method(path, value, el)`, de methoda wordt uitgevoerd als de gebruiker `ENTER` drukken
- `escape` {String} optioneel, een link naar een methode `method(path, value, el)`, de methoda wordt uitgevoerd als de gebruiker `ESC` drukken
- `can` {String} optioneel, een link naar de methode `method(opt, el)` moet `boolean` retourneren, dat betekent dat `can edit?`
- `error` {String} optioneel, een link naar de methode `method(el, isInvalid, meta)` wordt beoordeeld wanneer het item onvoldoende is en omgekeerd
- __NEW__ `class {String}` optioneel, voegt een klasnaam toe in het formulier `ui-editable-CLASS` (default: `default`)

---

`data-editable` Het attribuut beschrijft het gedrag:

- `path` {String} een __relatieve route__ naar eigendom (kan automatisch worden geërfd van `data-bind`)
- `required` {Boolean} optioneel, mogelijk "verplicht" (default: `false`)
- `type` {String} optioneel, kan `string` (default), `date`, `number`, `boolean`, `email` of `html` __NEW__ `tags` zijn
- `can` {String} optioneel, een weg naar `function(opt, el)` moet teruggaan `boolean`, dat betekent `can edit?`
- `save` {String} optioneel, een weg naar `function(opt, accepted(boolean))`, moet de functie `accepted` worden beoordeeld
- `format` {String} optioneel, een format voor `date`, standaard: `yyyy-MM-dd`
- `dirsource` {String} optioneel, de weg naar een gegevensbron
- `dircustom` {String/Boolean} optioneel, kan een route naar `function(val, next(new_val))` bevatten of kan `Boolean`. Deze optie kan een aangepaste waarde toevoegen (waarde niet gedefinieerd in de gegevensbron)
- `dirrender` {String} optioneel, een route naar `function(item, text)` (must HTML retourneren voor `j-Directory`), deze functie kan de lijst van items in `j-Directory` beïnvloeden
- `dirminwidth` {Nummer} optioneel, een minimale breedte voor `j-Directory`, standaard: `200`
- `dirmaxwidth` {Nummer} optioneel, een maximale breedte voor `j-Directory`
- `dirplaceholder` {String} optioneel, een plaatshouder voor `j-Directory`
- `dirempty` {String} optioneel, voegt een leeg veld toe voor `j-Directory`
- `dirkey` {String} optioneel, een sleutelnaam voor het lezen van `text` in `dirsource` (default: `name`)
- `dirvalue` {String} optioneel, een sleutelnaam voor het lezen van `value` in `dirsource` (default: `id`)
- `dirsearch` {Boolean} optioneel, kan zoeken naar `j-Directory` worden uitgeschakeld
- `autosource` {String} een weg naar de `search` functie in `autocomplete`, `function(search, render(arr))`
- `autovalue` {String} een eigendomsweg voor de waarde in `autosource`
- `maxlength` {Nummer} een maxlengte
- `minvalue` {Nummer} een min. waarde voor nummer type (default: `undefined`)
- `maxvalue` {Nummer} een max. waarde voor nummer type (default: `undefined`)
- `rebind` {Boolean} als `true` alleen `data-bind` aan dit element bindt (default: `0`)
- `validate` {String} optioneel, een voorwaarde voor validatie van waarde, kan een link bevatten naar `function(value)` of `!!value.match(/[a-z]+/)`
- `multiline` {Boolean} optioneel, maakt multiline + appends klasse `editable-multiline` (`inline-block` + `width:100%`) wanneer het is bewerken (default: `false`)
- `raw` {Boolean} optioneel, wanneer `true` dan de huidige HTML-inhoud zal als een plaatshouder zijn als de waarde `nullable` is (default: `true`)
- `accept` {String} optioneel, een voorwaarde voor de aanvaarding van waarde, kan een link bevatten naar `function(value)` of `!!value.match(/[a-z]+/)` is vergelijkbaar met `validate`
- `empty` {String} optioneel, maakt een lege waarde en kan leeg label of `1` of `true` bevatten voor auto `rebind` van binder
- `invalid` {String} optioneel, een link naar de methode `method(el, isInvalid, meta)` wordt beoordeeld wanneer het item onvoldoende is en omgekeerd

__Methoden__:

- __NEW__: `component.changed()` geeft een object met gewijzigde gegevens terug

__Goed om te weten__:

- Als de gebruiker een aantal `key` drukt, zal het bewerkbare element de `keypressed`-klasse bevatten zolang ze de controle niet hebben verlaten.
- Elk gewijzigd element bevat de klasse `changed`
- Als de component een aantal waarden verandert, bevat het hoofdelement de klasse `ui-editable-changed`.
- Als het element `data-bind` heeft met `empty`, wordt het na focus verwijderd.
- __NEW__ ondersteunt nu de `tags`-type. voor nu alleen ondersteunt met `rebind` en `data-bind`. (data-bind `template` met `{jQuery selector}` werken van `+v18`)
- __NEW__ als het element (__of ouder, of ouder van de ouder__) een attribuut bevat `data-disabled="1"`De controle wordt uitgeschakeld
- __NEW__ verborgen en ontbrekende elementen worden niet gevalideerd

Gebruik het met `<ui-component name="editable">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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