Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Entities with Knockout

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: &larr;</p>
<p>Knockout: <span data-bind='text: field.value'></span></p>
like image 447
nwinkler Avatar asked Jun 27 '12 11:06

nwinkler


People also ask

How do I use knockout js in HTML?

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.

What is Databind in HTML?

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).

What is Ko observable ()?

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.

What is data bind Knockout?

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.


1 Answers

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/

like image 161
RP Niemeyer Avatar answered Sep 25 '22 18:09

RP Niemeyer