如何在選擇中使用模板？

Question

通過執行以下操作，我可以在Knockout.js中創建一個偽選擇列表：

<div style="width:325px;height:500px;overflow:auto;" data-bind="template: { name: 'group-tmpl', foreach: explorer().categoryData }"></div>

但是您不會像使用<select>那樣獲得樣式和選定的值。

我嘗試這樣做，但是收到一條錯誤消息，說您不能在此數據綁定中使用模板。

<select data-bind="options: explorer().categories, value: explorer().selectedCategory, optionsText:'name', template: 'group-tmpl'" size="15" />          

我還嘗試在<option>指定一個模板，但是該模板顯示不正確（僅看到[object Object]的列表）。

我想擁有的一件事是<option>的圖像。 因此，我想我可以在加載后使用jQuery設置attr來嘗試使用css＆，但是這種方法無法達到使用Knockout的目的。

我希望我錯過了一些明顯和/或簡單的事情。

Answer 1

正如評論員所指出的那樣，在option s和select s內通常沒有太多奇特的東西。 通常，您需要使用類似Select2 ， Chosen或Selectize的庫，該庫通常由普通的select支持。

不過，要回答您的具體問題，如果要在選擇中使用模板化的foreach ，則可以很好地做到這一點：

 ko.applyBindings({ items: [ { txt: "option A" }, { txt: "option B" }, { txt: "option C" } ] }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script type="text/html" id="itemTmpl"> <option>~~~<!-- ko text: txt --><!-- /ko -->~~~</option> </script> <select data-bind="template: { name: 'itemTmpl', foreach: items }"></select> 

同樣，您不能在script模板中執行任何操作，因為您不能在開始時執行的select執行任何操作。 但它有可能使用模板+ foreach一個選擇。 一個有用的典型用例是當您需要（自定義） optgroup 。 另一個用途是您想在option s上包含特殊屬性（也許是aria-Attributes？）。