Menu

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

Edit

HTML

The html binding is same as original html binding except that is supports plugins to additionally process content or element.

Live Example

Standard input field
HTML in span element
With Smileys demo plugin

Toggle Smileys

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>HTML in <code>span</code> element</th>
		<td>
			<span data-bind="html: binder.model.html.text" class="col-xs-12"></span>
		</td>
	</tr>
    <tr>
        <th>With <code>Smileys</code> demo plugin</th>
        <td>
            <span data-bind="
                html: binder.model.html.text,
                plugins: [{­
                    '_class': Maslosoft.Koe.Smileys,
                    enabled: binder.model.smileys.enabled
                ­}]" class="col-xs-12"></span>
        </td>
    </tr>
</table>
<script>
	window.onload = (function () {­
		var data = {­text: 'Text <b>with</b> 8) <abbr title="HyperText Markup Language">HTML</abbr> :)'­};
		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>