javascript - 如何在选择中使用模板？

Question

我可以通过这样做在 Knockout.js 中创建一个伪选择列表:

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

但是您无法像使用 <select> 那样获得样式和选定值.

我尝试这样做，但出现错误，提示您不能在此数据绑定(bind)中使用模板。

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

我还尝试在 <option> 中指定一个模板，但没有正确呈现(只看到 [object Object] 的列表)。

我想要的其中一件事是 <option> 中的图像.所以我想我可以尝试使用 css 并在加载后使用 jQuery 设置 attr，但这种做法违背了使用 Knockout 的目的。

我希望我错过了一些明显和/或容易的事情。

Answer 1

正如评论者所指出的，一般来说，option 和 select 中不能有太多花哨的东西。您需要使用类似 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 上包含特殊属性(也许是 aria- 属性？)。