SRC Attribute

Src binding handler is a shorthand for elements which require src attribute to be dynamically updated. This binding should be used with elements supporting src attribute like images and iframes, img and iframe tags respectively. The src binding handler itself is not limited to images and iframes however, the binding will add src attribute if element does not have one.

Elements having src attribute

• audio - the URL of the audio file
• embed - the address of the external file to embed
• iframe - the address of the document to embed in the iframe tag
• img - the URL of an image
• input - the URL of the image to use as a submit button (only for type="image")
• script - the URL of an external script file
• source - Required when source tag is used in audio and video tags. Specifies the URL of the media file
• track - the URL of the track file containing subtitles or caption for video or audio tags
• video - the URL of the video file

Live example

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

Image with src binding:
Image with src punches:

While it is possible to use knockout punches for src attribute it is highly not recommended as browser will request resource named as binding value - in this example: {{filename}} - before bindings evaluation.

Set to image 1 Set to image 2

Relevant code used in examples:

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