Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar


SRC Attribute

Src binding handler is a shorthand for elements which require src attribute to be dynamically updated. This applies to images and iframes.

Live example

In this example with binding is used, making HTML code even more clean.

Image with src binding:
Image with src punches:

Set to image 1 Set to image 2

Relevant code used in examples:

<p data-bind="with: binder.model.Src">
	Filename: <input data-bind="textInput: filename" style="width:50%;"/> <br />
	Image with src binding: <img data-bind="src: filename"></img> <br />
	Image with src punches: <img src="{­filename­}­}"></img> <br />
	window.onload = (function(){­
		binder.model.Src = new Maslosoft.Koe.Src({­filename: 'images/maslosoft.png'­});
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));