qcobjects-docs
Version:
The official app and website for documentation of QCObjects
159 lines (121 loc) • 5.35 kB
Markdown
### Component HTML Tag
Is a HTML tag representation of a component instance. Every declaration of a `<component></component>` tag will generate a related instance of a QCObjects component. While a component tag is not an instance itself, you can even define some instance properties by setting the related tag attribute when it is available.
#### Available attributes
Below is a list of the available attributes for a component tag
##### The name Attribute
**`<component name>`**
Sets the name of the related component instance built by QCObjects.
###### Usage:
```html
<component name="name_of_component"></component>
```
###### Example:
```html
<!-- index.html -->
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
</head>
<body>
<!-- this will load the contents of ./templates/main[.tplextension] file -->
<component name="main"></component>
</body>
</html>
```
##### The cached Attribute
**`<component cached>`**
Sets the cached property if the related instance of a component.
NOTE: Only a value of "true" can be set in order to tell QCObjects that the component template content has to be cached. Any other value will be interpreted as false.
###### Usage:
```html
<component name="name_of_component" cached="true"></component>
```
##### The data property tag declaration
**`<component data-property1 data-property2 ...>`**
Sets a static value of a property for the data object in the component instance.
NOTE: Data property tag declaration was thought with the purpose to give some simple way to mocking a dynamic component with template assignments. Don't use it thinking it is a bidirectional way data binding. While you can get a bidirectional way behaviour accesing a data object from a component instance, it is not the same for the component tag. Data property declaration in component tags is only one way data binding because of components tree architecture.
##### The controllerClass Attribute
**`<component controllerClass>`**
Defines a custom Controller Class for the component instance
###### Usage:
```html
<component name="name_of_component" controllerClass="ControllerClassName"></component>
```
##### The viewClass Attribute
**`<component viewClass>`**
Defines a custom View Class for the component instance
###### Usage:
```html
<component name="name_of_component" viewClass="ViewClassName"></component>
```
##### The componentClass Attribute
**`<component componentClass>`**
Defines a custom Component Class for the component instance
###### Usage:
```html
<component name="name_of_component" componentClass="ComponentClassName"></component>
```
##### The effecClass Attribute
**`<component effectClass>`**
Defines a custom Effect Class for the component instance
###### Usage:
```html
<component name="name_of_component" effectClass="EffectClassName"></component>
```
##### The template-source Attribute
**`<component template-source>`**
Sets the tplsource property of the related instance of a component. Possible values are "none" or "default".
###### Usage:
```html
<component name="name_of_component" template-source="none"></component>
```
##### The tplextension Attribute
**`<component tplextension>`**
Sets the tplextension property of the related instance of a component. Possible values are any file extension. Default value is "html"
###### Usage:
```html
<component name="name_of_component" tplextension="tpl.html"></component>
```
#### ComponentURI
Is a helper function to let you define the templateURI for a component in a normalised way.
##### Example:
```javascript
var templateURI = ComponentURI({
'COMPONENTS_BASE_PATH':CONFIG.get('componentsBasePath'),
'COMPONENT_NAME':'main',
'TPLEXTENSION':"tpl.html",
'TPL_SOURCE':"default"
});
console.log(templateURI); // this will show something like "templates/components/main.tpl.html" depending on your CONFIG settings
```
#### componentLoader
Loads a component instance in a low level, and appends the component template content to the component body. In the most of cases you won't need to call componentLoader in order to load a component. This is automatically called by QCObjects when it's needed. componentLoader returns a promise that is resolved when the component load is done and rejected when the component load was failed.
##### Usage:
```javascript
[Promise] componentLoader(componentInstance,load_async)
```
Where componentInstance is a component instance created by _`New(ComponentDefinitionClass)`_
##### Example:
```javascript
componentLoader(componentInstance,load_async).then(
(successStandardResponse)=>{
// component load successful
var request = successStandardResponse.request;
var component = successStandardResponse.component;
},(failStandardResponse)=>{
// component load failed
var component = failStandardResponse.component;
});
```
#### buildComponents
Rebuilds every component that is a child element of the DOM element who owns the method. In the most of cases, you won't need to call buildComponents in order to build or rebuild every component in the DOM. This is automatically called by QCObjects when it's needed.
##### Usage:
```javascript
[element].buildComponents()
```
##### Example:
```javascript
document.buildComponents()
```