与 jQuery 验证绑定的单个 select 选项不起作用

Question

我正在使用敲除将对象列表绑定到select 。 Object Class 可以有任意数量的属性

<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 即使在选择后也不会重置错误。

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

 <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上的 Object 手表：

当指定optionsValue时，这是一个 Object Watch on selectedCity ：

Answer 1

问题在于，当将对象作为值处理时， option元素的值设置为“”。 jQuery 验证因此失败。 您可以编写绑定或包装绑定到通过的options绑定并将它们设置为一个值，但我认为它不比 go 更可取。

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

就像：

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);

使用如下绑定：

<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/

Answer 2

相当巧妙的解决方案是将optionsAfrerRender参数添加到选项绑定。 假设在“selectedCity”object 中有一个字段“cityId”，您可以将其分配给选项值。 请根据您的示例检查以下解决方案：

 <select id="TheProperty_City" 
    name="TheProperty_City" 
    class="required" 
    data-bind="options: cityList, 
               optionsText: 'Name',
               value: selectedCity,
               optionsAfterRender: function(option, item) 
                                        { option.value = item.cityId; }
               optionsCaption: '--select the city--'" />

使用这种方法，您将同时进行淘汰赛选项绑定和 jquery 验证。

Answer 3

上面的答案有一个警告。 第一个 select 值绑定（“--选择城市--”）将未定义，导致错误。

如果您修改代码以处理此问题，它将起作用。

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

注意：为了简洁起见，我已经从 ViewModel 中删除了所有内容，除了 setOptionValue 方法。

<script type="text/javascript">
var vm = {
    setOptionValue: function(option, item) {
        if (item === undefined) {
            option.value = "";
        } else {
            option.value = item.id;
        }
    }
};
ko.applyBindings(vm);

Answer 4

为了扩展 Robert 的答案，我们可以通过允许用户传入正确属性的字符串来使帮助器 function 对视图 model 中的每个下拉菜单起作用，无论上下文数据绑定如何：

JS

self.setOptionValue = function(propId) {
    return function (option, item) {
        if (item === undefined) {
            option.value = "";
        } else {
            option.value = item[propId];
        }
    }
};

HTML

<select class="custom-dropdown" data-bind="options: cityList, 
        optionsAfterRender: setOptionValue('AppointmentTypeId'), value: selectedCityObj, optionsCaption: 'Choose...'" data-validation="required"></select>