Knockoutjs多选列表不呈现html

Question

假设我在列表中有五个元素，分别是

item1
  item2
   item3
  item4
item5

如何制作它以便选择框将呈现html并在需要的地方显示空白。

选择框本身就在跟随。

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

我尝试了一个人建议使用data-bind="foreach: sectors"和<option data-bind="html: Name"></option>的内容但是这导致newForm().Sectors拥有文本值而不是对象，即使值正确呈现。

我用Google搜索了这个，似乎没有正确的方法让html呈现空白。 （即使我在控制日志时，它清楚地显示了空白区域，但没有在多选列表中显示出来。

有人想过一个很好的解决方案吗？

最后一种方法是编写自己的选项绑定，使用数据绑定html渲染html部分。

EDIT1 //似乎我右键单击并在chrome上选择编辑为html，它实际上将&呈现为&，从而导致错误的html，这就是它不是渲染。

Answer 1

经过数小时和数小时的测试后，我发现用 替换\t确实会在字符串前面添加空格，但是再次，多选框不会渲染这些空格。 / p>

我所做的是你必须创建一个自定义optionsText函数来替换knockoutjs的默认可视化器。

我这样做了：

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

这几乎将字符串拆分为\t并用适当的html替换为空格，从而产生一个漂亮的列表。