javascript - 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即使值正确呈现，也可以在那里显示文本值而不是对象。

我用谷歌搜索了一下，似乎没有正确的方法让 html 渲染空白。 (即使当我控制台日志时，它清楚地显示前面的空格，但不会在多选列表中显示它。

有没有人想到一个好的解决方案？

最后的手段可能是编写它自己的选项绑定(bind)，它也使用数据绑定(bind) html 呈现 html 部分。

EDIT1//似乎如果我右键单击并选择在 Chrome 上编辑为 html，它实际上会呈现 &如& ，这会导致在这个意义上不正确的 html，这就是它不渲染的原因。

Answer 1

经过数小时的测试，我发现用 \t 替换   确实会在字符串前面添加空格，但话又说回来，多 -选择框不会呈现这些。

我所做的是，您必须创建一个自定义 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 空间替换它们，从而产生了一个漂亮的列表。