j-Detail

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Този компонент може да възпроизвежда стойности от модела. Подпомага инлайн мапиране - погледнете в източния код на примера.

Конфигуриране:

dateformat {String} - формат за дата (предварително: DEF.dateformat)
datetimeformat {String} - формат за дата и време (предварително: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} - формат за изчислено число (изчислена: празна)
small {Boolean} позволява по-малък дизайн (предварително: false)
Стилът на компонентите style {Number} (предварително: 1), поддържат стиловете 2, 3 (минимално) и 4 (модерни)
defaultgroup {String} е подразбиране на групата (предварително: Default)
notnull {Boolean} нива на нулеви стойности (дефолт: false)
track {String} може да съдържа пътеки, разделени от comma, тази собственост ще наблюдава само промените в привличаните ключове

Декларация за данни:

var model = { firstname: 'Peter', lastname: 'Širka', age: 33 };
var items = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];
var form = [];

// The below values will be binded automatically from the "model" (according to the "path" field) because they contain "path" field
form.push({ group: 'Personal', label: 'First name', path: 'firstname', type: 'string', value: model, note: 'This is first name' });
form.push({ group: 'Personal', label: 'Last name', path: 'lastname', type: 'string', value: model, placeholder: 'String' });
form.push({ group: 'Personal', label: 'Age', path: 'age', type: 'number', value: model });

// The below values will be binded from "value" key
form.push({ group: 'Personal', label: 'Birth date', type: 'date', value: NOW });
form.push({ group: 'Additional', label: 'Newsletter', type: 'bool', value: true });
form.push({ group: 'Additional', label: 'City', type: 'list', value: 2, items: 'items' });
form.push({ group: 'Additional', label: 'Color', type: 'color', value: '#e73323' });
form.push({ group: 'Additional', label: 'Icon', type: 'fontawesome', value: 'fas fa-home' });

Собственост на данните в декларацията за данни:

group {String} - група име (необходимо)
label {String} етикет (необходима)
type {String} тип (необходим)
note {String} - малка нота под стойност
format {String} номер, например 2 или дата формат dd.MM.yyyy
detail {String} URL адрес за получаване на данни за list Тип и пример: /users/{0}/ и {0} ще бъде заменен с стойността от списъка
Елементи на items {Object Array/String} за тип list само, редове могат да съдържат път към Array или URL address за търсене
value {Object} е стойност или модел с стойности (тогава path се изисква)
path {String} - път към стойност в модела (value трябва да съдържа модел)
template {String} A Tangular шаблон (работи само с type:'template' и {{ value }} съдържа сурова стойност, а {{ item }} съдържа целия елемент)
empty {String} Празна стойност, когато стойността е нулева (предварително: ---)
show {String} Условителната функция value.type === 'company' Това означава, че оценяването на състоянието е true
NEW autoformat {Boolean} позволява автоматичен формат за email, или phones, и само за тип string (предварително: false)
NEW colorize {Boolean} оцветява стойността с изключение на типа list, color и icon
NEW plus {String} добавя стойност към края на преработената стойност за типове number и string

Допустими типове в данните:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

Добре е да се знае:

Ако групата съдържа само един танк, тогава името на групата не се представя

Използвайте го с <ui-component name="detail">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

example.html

<div style="width:500px">
	<ui-component name="detail" path="form"></ui-component>
	<br />
	<div>-- OR --</div>
	<br />
	<ui-component name="detail" path="model" config="style:2">
		<script type="text/plain">
			[
				{ name: 'First name', path: 'firstname', type: 'string' },
				{ name: 'Last name', path: 'lastname', type: 'string' },
				{ name: 'Age', path: 'age', type: 'number' }
			]
		</script>
	</ui-component>
	<br />
	<div>-- OR FILTERED --</div>
	<br />
	<ui-component name="detail" path="model" config="style:3">
		<script type="text/plain">
			[
				// Will be displayed, look to show condition ("value" means "model")
				{ name: 'First name', path: 'firstname', type: 'string', show: 'value.type==1' },
				{ name: 'Last name', path: 'lastname', type: 'string', show: 'value.type==1' },
				// Won't be displayed, look to show condition ("value" means "model")
				{ name: 'Age', path: 'age', type: 'number', show: 'value.type==2' }
			]
		</script>
	</ui-component>
	<br />
	<ui-component name="detail" path="model" config="style:4">
		<script type="text/plain">
			[
				// Will be displayed, look to show condition ("value" means "model")
				{ name: 'First name', path: 'firstname', type: 'string', show: 'value.type==1' },
				{ name: 'Last name', path: 'lastname', type: 'string', show: 'value.type==1' },
				// Won't be displayed, look to show condition ("value" means "model")
				{ name: 'Age', path: 'age', type: 'number', show: 'value.type==2' }
			]
		</script>
	</ui-component>
</div>

<script>
	var model = { firstname: 'Peter', lastname: 'Širka', age: 33, type: 1 };
	var items = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];
	var form = [];

	// The below values will be binded automatically from the "model" (according to the "path" field) because they contain "path" field
	form.push({ group: 'Personal', label: 'First name', path: 'firstname', type: 'string', value: model, note: 'This is first name' });
	form.push({ group: 'Personal', label: 'Last name', path: 'lastname', type: 'string', value: model, placeholder: 'String' });
	form.push({ group: 'Personal', label: 'Age', path: 'age', type: 'number', value: model });

	// The below values will be binded from "value" key
	form.push({ group: 'Personal', label: 'Birth date', type: 'date', value: NOW });
	form.push({ group: 'Additional', label: 'Newsletter', type: 'bool', value: true });
	form.push({ group: 'Additional', label: 'City', type: 'list', value: 2, items: 'items' });
	form.push({ group: 'Additional', label: 'Color', type: 'color', value: '#e73323' });
	form.push({ group: 'Additional', label: 'Icon', type: 'fontawesome', value: 'ti ti-home' });
</script>