I am trying to create an html hierarchical select based on this solution and using knockout

However, knockout encodes the string value i return.

How can i decode the text returned from the function?

jsFiddle example

Html:

<select data-bind="options: items, optionsText: getOptionText"></select>

Javascript:

var viewModel = {
    items: ko.observableArray([
        { Text: "Item 1", level: 1 },
        { Text: "Item 2", level: 2 },
        { Text: "Item 3", level: 3 },
        { Text: "Item 4", level: 4 }
    ]),
    getOptionText: function(data) {
        var value = "";
        for (var i = 1; i <= (data.level - 1) * 2; i++) {
            value += "&nbsp;";
        }
        value += data.Text;
        return value;
    }
};
ko.applyBindings(viewModel)

I am trying to create an html hierarchical select based on this solution and using knockout

However, knockout encodes the string value i return.

How can i decode the text returned from the function?

jsFiddle example

Html:

<select data-bind="options: items, optionsText: getOptionText"></select>

Javascript:

var viewModel = {
    items: ko.observableArray([
        { Text: "Item 1", level: 1 },
        { Text: "Item 2", level: 2 },
        { Text: "Item 3", level: 3 },
        { Text: "Item 4", level: 4 }
    ]),
    getOptionText: function(data) {
        var value = "";
        for (var i = 1; i <= (data.level - 1) * 2; i++) {
            value += "&nbsp;";
        }
        value += data.Text;
        return value;
    }
};
ko.applyBindings(viewModel)

• javascript
• jquery
• html
• knockout.js

2 Answers 2

Replace your " " with "\xA0" (The hexadecimal representation of the Non-Breaking Space character.)

The answer is to use the actual character for a space instead of an HTML entity. To get a non-breaking space type Alt+255. Just do this in place of the   in your code. It will look like a normal space but will display as a non-breaking space:

Live example: http://jsfiddle/jLbct/1/