javascript - 将 optgroup 与 knockout.js 一起使用

Question

我正在尝试在 Ryan Niemeyer 的回答 here 的指导下，在 knockout.js 中手动呈现 optgroups 内的选项。 .它工作正常，但前提是立即呈现选项。如果随后加载它们，则不会选择正确的项目。

代码和 fiddle 链接如下。改变

t: ko.observable(null)

到

t: ko.observable(t)

让它工作，所以问题肯定是延迟加载，我将 valueAllowUnset 设置为 true。

fiddle :http://jsfiddle.net/exyy7hq2/3/

HTML

<select data-bind="template: { name: 'selectTemplateType', data: t }, valueAllowUnset: true, value: selectedId"></select>
<div data-bind='text: selectedId'></div>

<script type="text/html" id="selectTemplateType">
    <!-- ko ifnot: $data -->
        <option>No template selected</option>
    <!-- /ko -->
    <!-- ko if: $data -->
        <option>Select</option>
        <!-- ko foreach: groups -->
            <optgroup data-bind="attr: { 'label': name }, foreach: types">
                <option data-bind="option: id, text: name"></option>
            </optgroup>
        <!-- /ko -->
    <!-- /ko -->
</script>

JavaScript

ko.bindingHandlers.option = {
    update: function(element, valueAccessor) {
       var value = ko.utils.unwrapObservable(valueAccessor());
       ko.selectExtensions.writeValue(element, value);   
    }        
};

var t = {
    groups: [
        { name: 'a', types: [{id: 1, name: 't1'}] },
        { name: 'b', types: [{id: 102, name: 't2'}, {id: 103, name: 't3'}] },
        { name: 'c', types: [{id: 5, name: 'x'}] }
    ]
}
var vm = {
    t: ko.observable(null),
    selectedId: ko.observable(103)
};
ko.applyBindings(vm);
setTimeout(function(){ vm.t(t); }, 2000);

Answer 1

似乎如果您不使用选项绑定(bind)，当您动态生成新选项时，Knockout 根本无法调整内容，即使 valueAllowUnset 设置为 true，所以我的方法根本不会'不工作；绑定(bind)时需要有正确的选项。实现这一点的一种体面的方法是呈现 select 仅在值出现后，如下所示(并且不需要选项自定义绑定(bind) - 只是一个常规值绑定(bind)在选项元素上)。

http://jsfiddle.net/exyy7hq2/11/

<!-- ko if: t -->
<select data-bind="template: { name: 'selectTemplateType', data: t }, value: selectedId"></select>
<!-- /ko -->
<!-- ko ifnot: t -->
<select>
    <option>No templates loaded</option>
</select>
<!-- /ko -->
<div data-bind='text: selectedId'></div>

<script type="text/html" id="selectTemplateType">
    <option>Select</option>
    <!-- ko foreach: groups -->
        <optgroup data-bind="attr: { 'label': name }, foreach: types">
            <option data-bind="value: id, text: name"></option>
        </optgroup>
    <!-- /ko -->
</script>