Icon

Icon binding handler is meant to display icon, depending on it's size. This is specifically usefull with Ilmatar Widgets project to display optimally sized and up-to-date icons and image thumbnails.

Scaling parameters are simulated here by created directory structures.

This binding does not have configuration parameters, is will behave depending on context. However setting extra binding value of cachebusting with value true will add timestamp to logo to ensure that always fresh copy is loaded. This is useful for dynamic images. If layout reflow during downloading of images is issue, the preloader binding can be set to some already loaded image.

Image with timestamp example and scaling parameters with cachebusting enabled:

• isImages is set to true
• iconSize is set to 64
• updateDate is set to 123. This parameter is used to keep images fresh, ie. to get new one on model update.

Binding parameters:

Icon value

Is image

Icon size 64 128

Static icon example with scaling. The isImage is set to false:

Size:

SVG example. Should not add scaling params because it is SVG:

Example with filename value and scaling params:

Relevant code used in examples:

<img data-bind="icon: binder.model.Image, cachebusting: true" />
    	<img data-bind="icon: binder.model.Icon" />
    	<img data-bind="icon: binder.model.svg" />
        <img data-bind="icon: binder.model.withFilename" />
    <script>
	window.onload = (function(){­
		binder.model.Image = new Maslosoft.Koe.Icon({­
			icon: 'images/maslosoft.png',
			isImage: true,
			iconSize: 64,
			updateDate: 123
		­});
		binder.model.Icon = new Maslosoft.Koe.Icon({­
			icon: 'images/maslosoft.png',
			isImage: false,
			iconSize: 64
		­});
		binder.model.svg = new Maslosoft.Koe.Icon({­
			icon: 'images/binder.svg',
			isImage: true,
			iconSize: 64
		­});
        binder.model.withFilename = new Maslosoft.Koe.Icon({­
            icon: 'images/subdir/',
            filename: 'msft.png',
            isImage: true,
            iconSize: 64
        ­});
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>