# j-Importer

> j-Import es un excelente componente para importar plantillas, scripts o estilos HTML según la ruta y la condición. El componente puede ayudar con las aplicaciones SPA porque puede importar plantillas fácilmente,

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

__j-Import__ es un excelente componente para importar plantillas, scripts o estilos HTML según la ruta y la condición. El componente puede ayudar con las aplicaciones SPA porque puede importar fácilmente plantillas, scripts o estilos de forma dinámica.


__Configuración__:

- `if {String}` necesita contener un valor
- `url {String}` URL relativa/absoluta a una subpágina o subparte
- `reload {String}` un enlace al método en el ámbito global, se ejecuta si la __condición__ es válida
- `cleaner {Number}` (opcional) tiempo de inactividad (en minutos) para la ejecución de la limpieza (predeterminado: `0`)
- `clean {String}` (opcional) un enlace para funcionar, se ejecuta antes de que se limpie el importador
- `id {String}` un identificador personalizado para reemplazar frases `~ID~` en el HTML importado (predeterminado: vacío)
- __NUEVO__: `singleton {Boolean}` maneja solo una instancia del importador según `path + if + url` (predeterminado: `false`)
- __NUEVO__: `parent {String}` se mueve como hijo directo del selector `parent`
- __NUEVO__: `adapt {Boolean}` si `true` llama al método `reload:?/soemthing` para el complemento anidado en lugar del complemento actual (predeterminado: `false`)

__Nueva actualización__:

j-Importer puede contener `<script type="text/html">` con un contenido que se evaluará como HTML si la condición es válida.

__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
- el importador reemplaza automáticamente los elementos `<SCR>` por elementos `<script>` solo dentro de la plantilla `<script type="text/html">`

__Es bueno saberlo 2__:

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.

Úselo con `<ui-component name="importer">`. 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
<div>CURRENT VALUE: <ui-bind path="myvalue" config="html:value"></ui-bind></div>
<ui-component name="importer" path="myvalue" config="if:d3;url:https://d3js.org/d3.v4.min.js"></ui-component>

<script>

	var myvalue = '';

	setTimeout(function() {
		SET('myvalue', 'd3');
	}, 3000);

	setTimeout(function() {
		SET('myvalue', null);
	}, 5000);

	setTimeout(function() {
		// The component contains prevention for double import, so D3 won't be imported again.
		SET('myvalue', 'd3');
	}, 8000);

</script>
```