El enlace de opciones de selección única con la validación de jQuery no funciona

Question

Estoy vinculando una lista de objetos a un select usando knockout. Clase de objeto puede tener cualquier número de propiedades

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

Esto funciona perfectamente bien y puedo usar viewModel.selectedCity().Name o viewModel.selectedCity().Value para los elementos de carga del niño.

Mi problema es con la validación de jQuery. Si dejo la declaración como la anterior, jQuery no restablece el error incluso después de la selección.

Lo arreglé especificando optionsValue en el enlace, pero luego el selectedCity devuelve el valor escalar y no el objeto completo. ¿Alguna idea de cómo preservar el comportamiento del objeto o hacer la validación de manera diferente?

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

El error se queda allí cuando optionsValue no se especifica:

Aquí está mi reloj Objeto en selectedCity:

Aquí está un objeto Reloj en selectedCity cuando optionsValue está especificado:

Answer 1

El problema es que cuando se trata de objetos como el valor, las option elementos tienen su valor ajustado en "". La validación de jQuery falla debido a esto. Puede escribir un enlace o un enlace envoltorio para el enlace options que atraviesa y simplemente establecerlos en un valor, pero no creo que sea preferible seguir esa ruta.

Una opción decente es almacenar el valor y usar un dependienteDebservable para representar el objeto seleccionado actualmente.

Sería como:

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

Con una unión como:

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

Muestra aquí: http://jsfiddle.net/rniemeyer/EgCM3/

Answer 2

solución bastante ordenada sería añadir optionsAfrerRender parámetro para opciones de encuadernación . Suponiendo que en el objeto 'selectedCity' hay un campo 'cityId', puede asignarlo a un valor de opción. Por favor, compruebe la siguiente solución basada en el ejemplo:

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

uso de este enfoque obtendrá trabajando ambas opciones de cobertura vinculante y validación de jQuery.

Answer 3

La respuesta anterior funciona con una advertencia. El primer valor de selección vinculado ("--select the city--") no estará definido, lo que provocará un error.

Si modifica el código para manejar esto, funcionará.

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

Nota: He despojado a cabo todo, desde el modelo de vista excepto por el método setOptionValue por razones de brevedad.

<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

Extender sobre la respuesta de Robert, podemos hacer el trabajo función auxiliar por cada desplegable en el modelo de vista no importa el contexto enlace de datos, permitiendo al usuario pasar de una cadena para la derecha propiedad:

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>