ForgeComponentes
pt

Componentes

j-Importer

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

j-Import é um ótimo componente para a importação de templates HTML, scripts ou estilos de acordo com o caminho e condição.


Configuração:

  • if {String} deve conter um valor
  • url {String} URL relativa/absoluta para uma subpágina ou subparte
  • reload {String} um link para o método no âmbito global, é executado se a condition for válida
  • cleaner {Number} (opcional) tempo de curvatura (em minutos) para o funcionamento da limpeza (default: 0)
  • clean {String} (opcional) um link para a função, é executado antes que o importador seja limpo
  • id {String} um identificador personalizado para substituir frases ~ID~ no HTML importado (default: vazio)
  • NEW: singleton {Boolean} trata apenas uma instância de importador de acordo com o path + if + url (default: false)
  • NEW: parent {String} ele se move como uma criança direta do seletor parent
  • NEW: adapt {Boolean} se true chama o método reload:?/soemthing para o plug-in nesto em vez do plug-ino atual (default: false)

Nova atualização:

j-Importer pode conter <script type="text/html"> com um conteúdo que será avaliado como HTML se a condição for válida.

É bom saber 1:

  • Todas as frases CLASS e ~PATH~ serão substituídas por config.path ou config.if automaticamente
  • Todas as frases ~ID~ serão substituídas por config.id automaticamente
  • O importador substitui automaticamente os elementos de <SCR> para os elementos <script> apenas dentro do modelo <script type="text/html">.

É bom saber 2:

Se o componente não estiver dentro do âmbito, então o valor do config.if substituirá os caracteres ? em todas as chaves de configuração.

Use-o com <ui-component name="importer">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

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>