Menu

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

Edit

Text

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

Live Example

Standard input field
Text 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>Text in <code>span</code> element</th>
		<td>
			<span data-bind="text: binder.model.html.text" class="col-xs-12"></span>
		</td>
	</tr>
    <tr>
        <th>With <code>Smileys</code> demo plugin</th>
        <td>
            <span data-bind="
                text: 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 8) The HTML parts like <div> or & are escaped :)'­};
		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>