j-DataSource

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

The component loads data from the external source via AJAX() method and it binds the value according to the config.path.

Configuration:

path {String} required a path where the value will be set
url {String} optional, a URL address for obtaining data
delay {Number} optional, a delay (in milliseconds) for obtaining data (defaul: 0)

Good to know:

config.path = '#codelist' sets a value in code lists DEF.cl.codelist
config.path = '%codelist' sets a value in as temporary
config.path = '?.path sets a value according to the plugin path
config.path = 'absolute.path sets a value according to the path

Can I use dynamic URL address?

Yes, you can use <ui-component name="datasource" path="..." for dynamic obtaining of data.

<ui-component name="datasource" path="?.urlcities" config="path:#cities"></ui-component>

How can I modify data before binding?

<ui-component name="datasource" config="url:https://www.yourdomain.com/api/countries/;path:#countries">
	<script type="text/plain">
		var output = [];
		for (var item of value)
			output.push({ id: item.Id, name: item.Name });
		return output;
	</script>
</ui-component>

Use it with <ui-component name="datasource">. 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="datasource" config="url:https://www.totaljs.com/dashboard.json;path:#mycodelist">
	<script type="text/plain">
		return value.children;
	</script>
</ui-component>

<ui-bind path="#mycodelist" config="html pre:JSON.stringify(value, null, '  ')" class="block">
	<pre></pre>
</ui-bind>