Come si usa knockout.js per costruire un <option> elemento <option> con sia testo che valori e anche impostare un valore inizialmente selezionato?

Sto utilizzando knockout.js per creare un s elemento e anche per impostare il suo valore predefinito selezionato. Tutto funziona come previsto fino a Aggiungo il binding optionsValue, a questo punto il menu a discesa non mostra più il valore iniziale corretto al caricamento della pagina.Come si usa knockout.js per costruire un <option> elemento <option> con sia testo che valori e anche impostare un valore inizialmente selezionato?

In altre parole, questo funziona:

<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name'"></select>

... ma questo non funziona:

<select data-bind="value: selectedAccount, options: accounts, optionsText: 'name', optionsValue: 'id'"></select>

Ecco il mio semplificato, codice completo:

<!doctype html> 
<html> 
    <head> 
     <title>Demo</title> 
     <script src='knockout-2.1.0.debug.js'></script> 
    </head> 
    <body> 
     <select data-bind="value: selectedAccount, options: accounts, optionsText: 'name', optionsValue: 'id'"></select> 
     <script> 
      function QuickTransferViewmodel() 
      { 
       var self = this; 

       self.accounts = 
       [ 
        { id: 0, name: "Spending" }, 
        { id: 1, name: "Savings" } 
       ]; 

       self.selectedAccount = ko.observable(self.accounts[1]); 
      } 
      ko.applyBindings(new QuickTransferViewmodel()); 
     </script> 
    </body> 
</html>

I si aspetterebbe che il menu a discesa mostri "Risparmi" come selezionato per impostazione predefinita. Lo fa solo se rimuovo il binding OptionValue.

Grazie in anticipo!

fonte

2012-08-29 Bryan

Non direttamente correlato alle tue domande, ma potresti ottenere dei risultati insoliti se l'associazione 'value' è prima di' options'. –

Il binding optionsValue viene utilizzato per determinare quale proprietà viene utilizzata per impostare l'attributo value sugli elementi option generati.

Questo cambiamento di una sola riga rende il vostro lavoro di esempio per me:

self.selectedAccount = ko.observable(1);

tuo value legame è impostato su selectedAccount che è un ID, ei valori nei vostri generati options elementi sono infatti gli ID.

fonte

2012-08-29 21:25:29

Ah, grazie! Ciò ha senso. Nella documentazione e nell'esercitazione di knockout.js, non usano il binding di options_altern. Suppongo che in assenza di valori di opzione specificati, knockout.js segua automaticamente il valore come riferimento agli elementi nell'array associato alle opzioni. Ma come hai fatto notare, questo funziona in modo diverso se si specifica un binding di OptionsValue. Ecco perché il mio codice ha funzionato solo quando optionsValue è stato escluso. Grazie ancora! – Bryan

Devi fare il "valore" uno di quelli nella lista di opzioni .....

ho finito per scrivere qualche CoffeeScript per gestire questa situazione ....

replaceWithMatchingExt = (observableToFind, observablePropertyToSet, list, match) -> 
    return if not observablePropertyToSet 
    return if not observableToFind() 
    return if list.length == 0 
    observablePropertyToSet (x for x in list when x[match]() == observableToFind()[match]())[0] 

replaceWithMatching = (prop, list, match) -> 
    replaceWithMatchingExt(prop, prop, list, match)

che poi mi permette di (anche CoffeeScript ...)

replaceWithMatching @Product, @Products(), 'Id'

dato che è il valore del prodotto, i prodotti è la lista di scelte .... e 'Id' è la proprietà che voglio abbinare su. cioè, Id è quello che posso usare per elaborare prodotti equivalenti.

Il codice sostituisce quindi il Prodotto osservabile con un oggetto che si trova nell'elenco Prodotti se corrisponde a uno.

fonte

2012-08-29 21:22:37

Come si usa knockout.js per costruire un <option> elemento <option> con sia testo che valori e anche impostare un valore inizialmente selezionato?

risposta

Problemi correlati