在 knockout.js 中恢复下拉菜单答案

【问题标题】：restoring drop-down in knockout.js在 knockout.js 中恢复下拉菜单
【发布时间】：2014-06-20 21:32:59
【问题描述】：

知道为什么下拉菜单没有设置其初始值吗？初始加载显示“选择...”，但我希望它显示最底部初始 JSON 中提供的“NCI 值”。

理想情况下，我希望保存的 JSON 不包含下拉列表中的每个项目。这就是为什么我的数据结构来自不同来源的原因。我无法让下拉菜单使用字符串重新选择正确的项目。

<div data-bind="with: compound">

    <h3>Dose Form</h3>
    <select
        data-bind="options: $root.compoundDoseForm,
                       optionsText: 'name',
                       value: doseForm,
                       optionsCaption: 'Choose...'"></select>

</div>
<p>
    <button data-bind='click: $root.save'>Save to JSON</button>
</p>
<textarea data-bind='value: $root.lastSavedJson' rows='5' cols='60'> </textarea>
<script>
    var Compound = function(data) {
        data = data || {};
        this.doseForm = ko.observable(data.doseForm);
    }

    var CompoundsModel = function(compound) {
        var self = this;
        self.compound = ko.observable(compound);
        self.compoundDoseForm = ko.observableArray([ {
            code : "AA",
            name : "NCI Values"
        }, {
            code : "",
            name : "Not Specified"
        } ]);

        this.save = function() {
            self.lastSavedJson(JSON.stringify(ko.toJS(self.compound), null, 2));
        };
        self.lastSavedJson = ko.observable("");
    }

    ko.applyBindings(new CompoundsModel(new Compound({
        "doseForm" : {
            "code" : "AA",
            "name" : "NCI Values"
        }
    })));
</script>

【问题讨论】：

简单。只需删除选项标题 :) 干杯

标签： knockout.js

【解决方案1】：

我在这里遗漏了什么吗？如果是这样，请解释一下，我会更新我的答案。

否则，如果您不希望“选择..”作为初始值（仅显示文本，而不是值），则删除您的 optionsCaption，然后选择列表中的第一项：

<select data-bind="options: $root.compoundDoseForm,
                   optionsText: 'name',
                   value: doseForm"></select>

Updated Fiddle

如果您没有默认选项，或者您想强制用户选择某些内容并验证是否为必填字段，则可以使用 optionsCaption。

【讨论】：

之前这个值确实是空的，我确实需要强制用户选择。我很高兴你解释了这一点，这对我来说并不明显。谢谢...
它似乎可以工作，但下拉菜单只是显示第一个值。我已经更新了默认值，尝试将其设置为下拉列表中的第二个值，但无济于事http://jsfiddle.net/jslim180/gcnaY/3/。

【解决方案2】：

只需将选择数据绑定更改为：

    <select data-bind="options: $root.compoundDoseForm,
                   optionsText: 'name',
                   optionsValue: 'code',
                   value: $root.compound().doseForm().code,
                   optionsCaption: 'Choose...'"></select>

【讨论】：

工作，谢谢。因为这是在with: compound,的范围内，所以$root.compound().doseForm().code可以缩短为doseForm().code
下拉填充，但更改值后保存 JSON 未反映新值。

【解决方案3】：

我不得不放弃“名称”和“代码”格式，只使用一个字符串数组作为下拉菜单。这是合理的，因为我保证项目是唯一的，我可以将它们转换回代码进行存储。

<div data-bind="with: compound">

    <h3>Dose Form</h3>
    <select
        data-bind="options: $root.compoundDoseForm, value: doseForm,
                   optionsCaption: 'Choose dose form...'"></select>

</div>
<p>
    <button data-bind='click: $root.save'>Save to JSON</button>
</p>
<textarea data-bind='value: $root.lastSavedJson' rows='5' cols='60'> </textarea>
<script>
    var Compound = function(data) {
        data = data || {};
        this.doseForm = ko.observable(data.doseForm);
    }

    var CompoundsModel = function(compound) {
        var self = this;
        self.compound = ko.observable(compound);
        self.compoundDoseForm = ko.observableArray([ "NCI Values", "Not Specified" ]);

        this.save = function() {
            self.lastSavedJson(JSON.stringify(ko.toJS(self.compound), null, 2));
        };
        self.lastSavedJson = ko.observable("");
    }

    ko.applyBindings(new CompoundsModel(new Compound({
        "doseForm" : "NCI Values"
    })));
</script>

【讨论】：