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

Text to Background Color

The textToBg will convert any text to background color. While at first it might sound weird, it might be used to create unique colors for different values, for instance enums, types etc.

Live Example

Standard input field
Span span element coloured  

Relevant code used in examples:

<table class="table table-condensed">
	<tr>
		<th class="col-xs-4">Standard input field</th>
		<td>
			<input data-bind="textInput: binder.model.html.text" class="col-xs-12"/>
		</td>

	</tr>
	<tr>
		<th>Span <code>span</code> element coloured</th>
		<td>
			<span data-bind="textToBg: binder.model.html.text" class="col-xs-12">&nbsp;</span>
		</td>
	</tr>
</table>
<script>
	window.onload = (function () {­
		var data = {­text: 'Green;)'­};
		binder.model.html = new Maslosoft.Koe.HtmlValue(data);
		binder.model.smileys = ko.tracker.factory({­enabled: true­});
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));

	­});
</script>