Knockout.js - 未设置选择值

Question

我使用的是 knockout.js，它没有设置空选项的值（四）：

<select data-bind="value: item.widgetValue, attr: {id: item.widgetName, name: item.widgetName}, options: item.options, optionsText: ‘label’, optionsValue: ‘value’” id=”fld-“ name=”fld0”>
  <option value=”one”>One</option>
  <option value=”two”>Two</option>
  <option value=”three”>Three</option>
  <option value>Four</option>
  ...
</select>

这造成了一个问题：当您选择任何选项并尝试选择四时，它会选择一；它只会在您第二次尝试选择它时选择四。

我已尝试更改淘汰赛数据绑定来修复它：

value: $.trim(item.widgetValue)

这允许您立即选择四个，但在您提交选择了四个的表单后错误地显示一个被选中。

关于可能导致此问题的原因或如何解决此问题的任何想法？

Answer 1

如果您在选择元素上使用选项绑定，则不应手动设置选项。如果这些是由绑定动态创建的（即，您实际上是在使用 item.options 作为源）然后检查您将选择元素绑定到的对象 -

item.options 可能看起来像这样（缺少值或与其他选项不同）-

item.options = [
    { label: 'someLabel1', value: 'someValue1' },
    { label: 'someLabel2', value: 'someValue2' },
    { label: 'someLabel3', 'someValue3' }
    ];

但应该是像这样更统一的对象（定义明确的模型）-

function optionModel(label, value) {
    var self = this;
    self.label = ko.observable(label);
    self.value = ko.observable(value);
}

item.options = [
    new optionModel('someLabel1', 'someValue1'),
    new optionModel('someLabel2', 'someValue2'),
    new optionModel('someLabel3', 'someValue3')
    ];