How can I output HTML Entities in fields that are bound to a variable in the viewModel? I would like to display an HTML Entity like ← (←
) in a field bound to a span
in the HTML. Unfortunately, the HTML is escaped, so the browser displays ← instead of the symbol.
Fiddle with an example: http://jsfiddle.net/nwinkler/KES2j/
JavaScript:
var data = { value : '←'};
var viewModel = {
field: ko.mapping.fromJS(data)
};
ko.applyBindings(viewModel);
HTML:
<p>HTML: ←</p>
<p>Knockout: <span data-bind='text: field.value'></span></p>
It is very easy to use KnockoutJS. Simply refer the JavaScript file using <script> tag in HTML pages. A page as in the following image will be displayed. Click on download link and you will get the latest knockout.
A data binding connects data from a custom element (the host element) to a property or attribute of an element in its local DOM (the child or target element).
An observable is useful in various scenarios where we are displaying or editing multiple values and require repeated sections of the UI to appear and disappear as items are inserted and deleted. The main advantage of KO is that it updates our UI automatically when the view model changes.
Knockout's declarative binding system provides a concise and powerful way to link data to the UI. It's generally easy and obvious to bind to simple data properties or to use a single binding.
You can use the html
binding for something like this one. It would look like:
<p>Knockout: <span data-bind='html: field.value'></span></p>
Sample: http://jsfiddle.net/rniemeyer/KES2j/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With