knockoutjs: problema con las etiquetas de opción y la visibilidad

Question

Parece que tenemos un comportamiento diferente entre dos grupos de navegadores sobre la visibilidad de las OPCIONES de una etiqueta html SELECT: si establezco visible a falso en la etiqueta OPTION, la relevante el elemento de la lista desplegable está oculto en Chrome y Firefox, pero aún está visible en IE8 y Safari.

http://jsfiddle.net/v8gyG/12/

¿Tiene alguna sugerencia o estoy haciendo algo mal? Por favor, tenga en cuenta que no puedo usar jquery.tmpl.js en este caso, sólo modificable etiquetas/Seleccionar opción

Answer 1

Sé que fue hace mucho tiempo, pero vale la pena una respuesta ya que encontré esta pregunta en Google mientras buscaba una respuesta yo mismo. Pensé en la solución, así que estoy aquí para compartirla. Dos años y "visible" todavía no funciona **, así que revisé el enlace "si". La vinculación de datos dentro del elemento de opción lo hizo oculto pero seleccionable. Knockout también tiene algo llamado: "sintaxis de flujo de control sin contenedor".

Esto funciona para mí:

<!-- ko if: category.parent == 0 --> 
    <option data-bind="value: category.name, text: category.name"></option> 
    <!-- /ko --> 

Funciona porque si se esconde DOM. Desde el sitio web knockout:

si juega un papel similar al enlace visible. La diferencia es que, con visible, el marcado contenido siempre permanece en el DOM y siempre tiene sus atributos de enlace de datos aplicados - el enlace visible simplemente usa CSS para alternar la visibilidad del elemento del contenedor. Sin embargo, el enlace if, , agrega o elimina físicamente el marcado contenido en su DOM, y solo aplica enlaces a descendientes si la expresión es verdadera.

Puede leer más en la documentación: http://knockoutjs.com/documentation/if-binding.html

comprobar varias opciones aquí: http://jsfiddle.net/v8gyG/24/

** "visible" funciona en Chrome 27 y Firefox 21, pero no con selección múltiple en Chrome.

<!-- ko if: --> funciona también en IE 10 y con multiselect en Chrome.

Answer 2

Cuando se establece el atributo visible, nocaut simplemente añade un atributo al elemento style="display: none"<option>. Esto no es válido en IE. Ver:

style.display='none' doesn't work on option tags in chrome, but it does in firefox

Answer 3

El código sugiere que está utilizando la selección para elegir un número de página. Considere crear un DependentObservable que contenga las opciones.

viewModel.Pages = ko.dependentObservable(function() { 
    var pages = [] 
    for (var i=0 ; i < this.NumPages() ; ++i) { 
    pages.push({label: "Pag " + (i+1), value: (i+1)}) 
    } 
    return pages; 
}, viewModel) 

Y en la vista:

<select data-bind="value: Page, options: Pages, optionsText: 'label'></select> 

Cuando se elige la página 2, la variable Page contendrá {label: 'Pag 2', valor: 2}