# j-Part

> Este componente puede manejar diferentes contenidos de forma asincrónica. Si el elemento no contiene ningún contenido, el componente descarga el contenido de acuerdo con la URL definida en la configuración.

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

Este componente puede manejar diferentes contenidos de forma asincrónica. __Si el elemento no contiene ningún contenido__ entonces el componente descarga el contenido de acuerdo con el `url` definido en la configuración.

- __NEW__ `path` puede contener `{String Array}`

__Configuración__:

- Se requiere `url {String}`, una dirección URL relativa
- Se requiere `if {String}`, condición, se compara con el valor dentro de `path` (__NEW__: admite múltiples rutas divididas por `comma`)
- `reload {String}` opcional, un enlace a la función `function(init) {}`, se ejecuta cuando la pieza está visible (siempre)
- `hidden {String}` opcional, un enlace a la función, se ejecuta cuando la pieza está oculta (siempre)
- `init {String}` opcional, un enlace a la función, se ejecuta cuando la pieza está visible y una vez
- `default {String}` opcional, un alias corto para `DEFAULT(default)`
- `hide {Boolean}` elemento opcional que se oculta automáticamente si la condición `if` no es válida (predeterminado: `true`)
- `cleaner {Number}` opcional, tiempo de inactividad (en minutos) para la ejecución de la limpieza (predeterminado: `0`)
- `clean {String}` opcional, un enlace a la función, se ejecuta antes de limpiar la pieza
- `loading {Boolean}` opcional, habilita la carga mediante `SETTER('loading')` (predeterminado: `true`)
- `path {String}` opcional, el componente reemplaza todas las frases `~PATH~` y `CLASS` por el valor de `path` en la plantilla descargada.
- `replace {String}` opcional, un enlace al método `function(content) { return content }` que puede modificar la plantilla descargada
- `absolute {Boolean}` opcional, habilita la posición absoluta (por defecto `false`)
- `check {String}` opcional, un enlace a la función `function(next) { next(); }`, se ejecuta cuando la pieza quiere mostrarse
- `invisible {Boolean}` permite agregar la clase `invisible` cuando la pieza se va a ocultar (predeterminado: `false`)
- `delay {Number}` un retraso (en ms) para eliminar la clase `invisible` y ocultar `loading` (predeterminado: `500`)
- `autofocus {Boolean/String}` enfoca la primera entrada, área de texto (predeterminado: `false`)
- `delayloading {Number}` un retraso (en ms) para ocultar `loading` (predeterminado: `800`)
- `id {String}` un identificador personalizado para reemplazar frases `~ID~` en el HTML importado (predeterminado: vacío)

__Es bueno saberlo 1__:

- todas las frases `CLASS` y `~PATH~` serán reemplazadas por `config.path` o `config.if` automáticamente
- todas las frases `~ID~` serán reemplazadas por `config.id` automáticamente

__Es bueno saberlo 2__:

El componente de pieza emite un `event` en la forma: `parts.` + `config.if` para extensión de piezas. Esto puede resultar muy útil para algunos sistemas de complementos. Ejemplo:

__Es bueno saberlo 3__:

Si el componente de la pieza no está dentro del alcance, entonces el valor de `config.if` reemplazará los caracteres `?` en todas las claves de configuración.

```js
ON('parts.YOURIFCONDITION', function(element, pagecomponent) {
	// It's executed only when the part is initialized
});
```

Úselo con `<ui-component name="part">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

```html example.html
<ui-component name="part" path="currentpart" config="if:home;url:/bla/bla/home.html"></ui-component>
<ui-component name="part" path="currentpart" config="if:services;url:/bla/bla/services.html;reload:services_reload"></ui-component>
<ui-component name="part" path="currentpart" config="if:contact;url:/bla/bla/contact.html;reload:contact_reload"></ui-component>

<pre><code>SET(&#39;currentpart&#39;, &#39;home&#39;);</code></pre>

<script>
	var currentpart = '';
</script>
```