2017-10-07 100 views
1

比方說,我在列表五行,respectivlyKnockoutjs多選列表不渲染HTML

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呈現空格。 (即使當我控制檯日誌,它清楚地顯示空白盈,但不顯示出來多選名單上。

有沒有人認爲應該是一個很好的解決方案呢?

最後的手段可能是寫它自己的選項結合,呈現HTML部分以及使用數據綁定HTML。

EDIT1 //似乎如果我點擊右鍵並選擇編輯爲html對鉻,它實際上呈現&&amp;,這會導致不正確html在這個意義上講,這就是它沒有渲染的原因。

回答

0

經過數小時和數小時的測試後,我發現用\t代替&nbsp;確實會在字符串前添加空格,但再次,多選框並不會顯示這些空格。

我所做的是您必須創建一個自定義的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代替他們的空間,從而在一個漂亮的列表。

example of list then

+1

這真的很有趣..感謝分享! – Ray