Menu

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

Edit

ID Attribute

ID binding handler is a shorthand for elements which require id attribute to be dynamically updated. This is intended for easier binding of id attribute without using attr binding.

Live example

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

Element with id binding:
Element with id punches:

Set to id-one Set to id-two

Relevant code used in examples:

<input id="id-input" class="form-control" data-bind="textInput: id">
Element with <code>id</code> binding: <span data-bind="id: id, text: 'ID: ' + id" class="badge"></span> <br>
Element with <code>id</code> punches: <span id="{­id­}­}" data-bind="text: 'ID: ' + id" class="badge"></span> <br />
<script>
	window.onload = (function(){­
		binder.model.withId = new Maslosoft.Koe.Id({­id: 'id-initial'­});
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>