knockoutjs: problema con tag di opzione e visibilità

Question

Sembra che abbiamo un comportamento diverso tra due gruppi di browser sulla visibilità delle OPZIONI di un tag html SELECT: se imposto a false nel tag OPTION, il relativo la voce di elenco a discesa è nascosta in Chrome e Firefox ma è ancora visibile in IE8 e Safari.

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

Avete qualche suggerimento o sto facendo qualcosa di sbagliato? Si prega di essere consapevole del fatto che non posso usare jquery.tmpl.js in questo caso, solo hard coded selezionare i tag/OPZIONE

Answer 1

So che è stato chiesto molto tempo fa, ma vale la pena dare una risposta dato che ho trovato questa domanda in Google mentre cercavo personalmente una risposta. Ho pensato alla soluzione quindi sono tornato qui per condividerlo. Due anni e "visibile" continuano a non funzionare **, quindi ho controllato "se" vincolante. Il collegamento dei dati all'interno dell'elemento opzionale lo rendeva nascosto ma selezionabile. Knockout ha anche qualcosa chiamato: "sintassi del flusso di controllo senza container".

questo funziona per me:

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

Funziona perché se nasconde DOM. Dal sito Web a eliminazione diretta:

se riproduce un ruolo simile alla rilegatura visibile. La differenza è che , con visibile, il codice contenuto rimane sempre nel DOM e ha sempre applicato gli attributi dati-bind - il legame visibili solo utilizza CSS per alternare visibilità nell'elemento contenitore. Se legando, , tuttavia, aggiunge o rimuove fisicamente il markup contenuto nel DOM, e applica i collegamenti ai discendenti solo se l'espressione è vera.

Si può leggere di più nella documentazione: http://knockoutjs.com/documentation/if-binding.html

Controlla varie opzioni qui: http://jsfiddle.net/v8gyG/24/

** "visibile" funziona in Chrome 27 e Firefox 21, ma non con la selezione multipla in Chrome.

<!-- ko if: --> funziona anche in IE 10 e con multiselect in Chrome.

Answer 2

Quando si imposta l'attributo di visible, ko solo aggiunge un attributo style="display: none" all'elemento <option>. Questo non è valido in IE. Vedere:

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

Answer 3

Il codice suggerisce che si sta utilizzando la selezione per la scelta di un numero di pagina. Prendi in considerazione la possibilità di creare un oggetto DependentObservable che contenga le opzioni.

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) 

E nella vista:

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

Quando Page 2 è scelto, la variabile Page conterrà {label: 'Pag 2', il valore: 2}