Menu

Maslosoft Balin Logo Maslosoft Balin Documentation
Knockout binding handlers

Edit

HREF Attribute

HREF binding handler is a shorthand for attr binding handler for links href attribute. Base syntax uses data bind HTML attribute:

<a data-bind="href: balin.model.Href.filename">Text</a>

Using with punches syntax

This binding, as well many others can be used with alternative syntax, called ko punches. Just set href attribute to observable reference wrapped with curly braces:

<a href="{{balin.model.Href.filename}}">Text</a>

Live example

Raw Link href
Link with data-bind This should point to above url
Link with punches Using ko punches
Link with target _blank This should open in new window

Link value can be changed via JavaScript: Set href to `#`.

Example of using stopPropagation option:

Default behavior This should show alert
Option stopPropagation set to true This should not show alert

Relevant code used in examples:

<table class="table table-condensed">
	<tr>
		<th>Raw Link href</th>
		<td>
			<input data-bind="textInput: balin.model.Href.filename"/>
		</td>
	</tr>
	<tr>
		<th>Link with <code>data-bind</code></th>
		<td>
			<a data-bind="href: balin.model.Href.filename">This should point to above url</a>
		</td>
	</tr>
	<tr>
		<th>Link with punches</th>
		<td>
			<a href="{{balin.model.Href.filename}}">Using ko punches</a>
		</td>
	</tr>
	<tr>
		<th>Link with target <code>_blank</code></th>
		<td>
			<a data-bind="href: balin.model.Href.filename" target="_blank">This should open in new window</a>
		</td>
	</tr>
</table>
<table class="table table-condensed">
	<tr>
		<th>Default behavior</th>
		<td>
			<span onclick="alert('Clicked on span around link')">
				<a data-bind="href: balin.model.Href.filename">This should show alert</a>
			</span>
		</td>
	</tr>
	<tr>
		<th>Option <code>stopPropagation</code> set to <code>true</code></th>
		<td>
			<span onclick="alert('Clicked on span around link')">
				<a data-bind="href: balin.model.Href.filename, stopPropagation: true">This should <i>not</i> show alert</a>
			</span>
		</td>
	</tr>
</table>

<script>
	window.onload = (function(){
		balin.model.Href = new Maslosoft.Ko.BalinDev.Models.Href({filename: 'http://example.com/'});
		ko.applyBindings({model: balin.model}, document.getElementById('ko-balin'));
	});
</script>
  • Projects