Knockoutjs multi-select list not rendering html

Question

Let's say i have five elements in list, respectivly

item1
  item2
   item3
  item4
item5

How can one make it so that the select-box will render the html and show the whitespace where needed.

Select-box itself is following.

<select id="formSectors" multiple size="5" class="form-control" data-bind="options: sectors, optionsText: 'Name', selectedOptions: newForm().Sectors"></select>

I have tried something that one guy suggested to use data-bind="foreach: sectors" and <option data-bind="html: Name"></option> But this resulted the newForm().Sectors to have the text values rather than objects there, even though the values rendered correctly.

I have googled this around and seems like there is no proper way to make the html render the whitespaces. (Even though when I console log, it clearly shows whitespace infront, but does not show it out on multi-select list.

Has anyone thought of a good solution for that?

The last resort could be to write it's own option binding, that renders the html part as well using data-bind html.

EDIT1// Seems if i right click and choose edit as html on chrome, it actually renders & as & , which results in incorrect html in that sense, which is the reason it is not rendering.

Answer 1

After hours and hours of testing I found out that replacing   with \\t will indeed add spaces in front of the string, but then again, the multi-select box does not render those.

What I did is that you have to create an custom optionsText function that replaces the default visualizer of the knockoutjs.

I did it so:

<select id="formSectors"
        multiple
        size="5"
        class="form-control"
        data-bind="options: sectors,
        optionsText: function(item){return item.Name.split('\t').join('&nbsp;&nbsp;&nbsp;&nbsp;')},
        selectedOptions: newForm().Sectors">
</select>

Which pretty much splits the string at \\t and replaces them with proper html for space, resulting in a pretty list.