如何在select中使用模板？

我能夠做這個創造Knockout.js僞選擇列表：如何在select中使用模板？

<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>中的圖像。所以我想我可以嘗試使用css &加載後使用jQuery來設置attr，但這種類型擊敗了使用Knockout的目的。

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

來源

2015-11-03 Carol AndorMarten Liebster

[你不能]（http://stackoverflow.com/questions/11237807/can-i-use-html-tags-in-the-options-for-select-elements）有圖像或其他HTML原生'

正如評論者所指出的，在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 s。另一個用途可能是你想在option上包含特殊屬性（aria-屬性或許？）。

來源

2015-11-03 19:02:12 Jeroen

如何在select中使用模板？

回答

相關問題