j-Stash

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

The component can postpone elements without destructing and detaching from the DOM. This component can help you with dynamic content from the server side. We use the component in the Total.js FlowStream projects for the component's settings.

elements can contain everything like components, scopes, binders, etc.

Configuration:

load {String} a path to the method function(id, next(html/element)) that is evaluated if the content wasn't loaded before
NEW: class {String} a class name for the stash container (default: hidden)

Methods:

component.add(id, html/element) adds new HTML/element
component.clear([id]) clears specific ID (id is optional) or clears all cached content

Use it with <ui-component name="stash">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="stash" path="common.id" config="load:loadcontent"></ui-component>

<script>

	var common = {};

	function loadcontent(id, next) {
		// next(html/element)
		console.log('LOAD:', id);
		next('<div>{0}</div>'.format(id));
	}

	setTimeout(function() {
		SET('common.id', 'component_settings_1');
	}, 1000);

	setTimeout(function() {
		SET('common.id', 'component_settings_2');
	}, 3000);

	setTimeout(function() {
		SET('common.id', 'component_settings_3');
	}, 6000);

	setTimeout(function() {
		SET('common.id', 'component_settings_1');
	}, 9000);

</script>