jquery - 与 jQuery 验证绑定(bind)的单选选项不起作用

Question

我使用 knockout 将对象列表绑定(bind)到select。对象类可以有任意数量的属性

<select id="TheProperty_City" 
        name="TheProperty_City" 
        class="required" 
        data-bind="options: cityList, 
                   optionsText: 'Name',  
                   value: selectedCity, 
                   optionsCaption: '--select the city--'" />

这工作得很好，我可以使用 viewModel.selectedCity().Name 或 viewModel.selectedCity().Value 来加载子元素。

我的问题是 jQuery 验证。如果我保留上面的语句，即使在选择之后，jQuery 也不会重置错误。

我通过在绑定(bind)中指定 optionsValue 来修复它，但随后 selectedCity 返回标量值而不是整个对象。知道如何保留对象行为或以不同的方式进行验证吗？

 <select id="TheProperty_City" 
         name="TheProperty_City" 
         class="required" 
         data-bind="options: cityList, 
                    optionsText: 'Name',  
                    optionsValue: 'Value', //added the optionsValue
                    value: selectedCity, 
                    optionsCaption: '--select the city--'" />

当未指定 optionsValue 时，错误仍然存​​在:

这是我在 selectedCity 上的对象观察:

这是指定 optionsValue 时 selectedCity 上的对象监视:

Answer 1

问题是，当将对象作为值处理时，option 元素的值设置为“”。 jQuery 验证因此失败。您可以编写一个绑定(bind)或包装器绑定(bind)到要经过的 options 绑定(bind)，并将它们设置为一个值，但我认为最好不要走这条路。

一个不错的选择是存储值并使用 dependentObservable 来表示当前选定的对象。

就像:

var viewModel = {
    cityList: [{ Name: "Madison", Value: "MSN" }, { Name: "Milwaukee", Value: "MKE" }, { Name: "Green Bay", Value: "GRB" }],
    selectedCityValue: ko.observable()
};

viewModel.selectedCity = ko.dependentObservable(function() {
    var value = this.selectedCityValue();
    return ko.utils.arrayFirst(this.cityList, function(city) {
       return city.Value === value; 
    });
}, viewModel);

绑定(bind)如下:

<select id="TheProperty_City" name="TheProperty_City" class="required" 
    data-bind="options: cityList, 
    optionsText: 'Name', 
    optionsValue: 'Value',
    value: selectedCityValue, 
    optionsCaption: '--select the city--'" />

示例:http://jsfiddle.net/rniemeyer/EgCM3/