# 05. __Component__ [![+Professional Support](https://www.totaljs.com/img/badge-support.svg)](https://www.totaljs.com/support/) [![+Chat with contributors](https://www.totaljs.com/img/badge-chat.svg)](https://messenger.totaljs.com) This page describes the whole implementation of reusable component. [__Learn__ from existing components](https://componentator.com). __Quick navigation:__ - [Definition](#) - [Properties](#) - [Delegates](#) - [Methods](#) - [Usage in HTML](#) - [Configuration](#) - [Data binding](#) ![Component workbench](/download/B20190425T000000015.png) ## Definition The code below describes a simple component definition with default configuration: ```javascript COMPONENT('datetime', 'interval:1000;format:dd.MM.yyyy', function(self, config, cls) { // This is the component scope // self == this // config == this.config // cls {String} auto-generated class name in the form: "ui-COMPONENTNAME" (+v17) var interval; self.readonly(); self.blind(); self.configure = function(name, value, init) { switch (name) { case 'interval': interval && clearInterval(interval); interval = setInterval(self.tick, value); break; case 'format': !init && self.tick(); break; } }; self.tick = function() { self.html(new Date().format(config.format)); }; }); ``` __`+v14.0.0` Declaration with a specific version__: ```javascript // v1 COMPONENT('datetime@1', 'interval:1500;format:dd.MM.yyyy', function(self, config) { // ... }); // v2 COMPONENT('datetime@2', 'interval:500;format:dd.MM.yyyy', function(self, config) { // ... }); ``` __`+v14.0.0` Declaration with multiple versions__: ```javascript // v1 COMPONENT('datetime, datetime@1, datetime@2', 'interval:1000;format:dd.MM.yyyy', function(self, config) { // ... }); ``` - [`COMPONENT()`](@17092620450002mpt0#method-component-) is a global variable ## Properties - [`self._id`](#property-self-_id-) - [`self.caller`](#property-self-caller-) - [`self.config`](#property-self-config-) - [`self.element`](#property-self-element-) - [`self.global`](#property-self-global-) - [`self.id`](#property-self-id-) - [`self.name`](#property-self-name-) - [`self.path`](#property-self-path-) - [`self.pathscope`](#property-self-pathscope-) - [`self.removed`](#property-self-removded-) - [`self.scope`](#property-self-scope-) - [`self.siblings`](#property-self-siblings-) - [`self.template`](#property-self-template-) - [`self.trim`](#property-self-trim-) - [`self.type`](#property-self-type-) ### Property: `self._id` The property contains an internal identificator for this component. - `readonly` - returns `String` ### Property: `self.caller` The property contains a reference to caller/parent of some method executed via `.exec()` - `readonly` - returns `Component` - default `undefined` ### Property: `self.config` The property contains the whole configuration. - `readonly` - returns `Object` ### Property: `self.element` - `readonly` - returns `jQuery Element` ### Property: `self.global` The property contains shared temporary object for all instances of this component. - returns `Object` ### Property: `self.id` The property contains an identifactor for this component. jComponent binds `data-jc-id="ID"` attribute to this property automatically. Otherwise `self.id` is same as `self._id`. - `readonly` - returns `String` ### Property: `self.name` The property contains a name of this component. - `readonly` - returns `String` ### Property: `self.path` The property contains the absolute path for data-binding. This value can be changed via [`self.setPath()`](#method-setpath-). - `readonly` - returns `String` ### Property: `self.pathscope` The property contains a path from parent e.g`