# j-Editable

> Този компонент може да редактира всички елементи с редактируем клас. работи с данни-обвързани или динамични стойности.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: bg
Content-SHA256: 3c7289b852c6dd5a2260b3e85edf7e7b57a3fe7b11d878d167e75ae0fab547fd
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} __relative path__ към собствеността (може да бъде наследен от `data-bind` автоматично)
- `required` {Boolean} опционално, позволява "необходимо" (предварително: `false`)
- `type` {String} опционално, може да бъде `string` (предварително), `date`, `number`, `boolean`, `email` или `html` __NEW__ `tags`
- `can` {String} опция, пътят към `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` {No} опционално, минимална ширина за `j-Directory`, подразбиране: `200`
- `dirmaxwidth` {No} опция, максимална ширина за `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` {No.} минимална стойност за тип номер (предварително: `undefined`)
- `maxvalue` {No.} максималната стойност за тип номер (предварително: `undefined`)
- `rebind` Ако е `true` връзката `data-bind` В този случай (по подразбиране) `0`)
- `validate` {String} опция, условие за валидиране на стойността, може да съдържа връзка към `function(value)` или `!!value.match(/[a-z]+/)`
- `multiline` {Boolean} опционално, позволява многолинен + приложни клас `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 Източник: Питър Шерка 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>
```