Come ottenere l'opzione di menu selezionata da un array osservabile knockout.js?

Question

Mi sento come se mi mancasse qualcosa di molto semplice, ma non riesco a ottenere un menu a discesa per funzionare come mi aspetto di utilizzare Knockout.js.

Ho un set di oggetti che voglio presentare in un menu, e ho bisogno di trovare l'opzione selezionata e postarla sul server. Posso ottenere il menu per il rendering, ma non riesco a ottenere il valore dell'oggetto selezionato. Il mio modello vista si presenta così:

function ProjectFilterItem(name, id) { 
    this.Name = name; 
    this.Id = id; 
} 

function FilterViewModel() { 
    this.projectFilters = ko.observableArray([ 
     new ProjectFilterItem("foo", "1"), 
     new ProjectFilterItem("bar", "2"), 
     new ProjectFilterItem("baz", "3") 
    ]); 
    this.selectedProject = ko.observable(); 
} 

ko.applyBindings(new FilterViewModel()); 

e la mia vista markup simile a questa:

<select 
    id  = "projectMenu" 
    name  = "projectMenu" 
    data-bind = " 
     options:  projectFilters, 
     optionsText: 'Name', /* I have to enquote the value or I get a JS error */ 
     optionsValue: 'Id', /* If I put 'selectedProject here, nothing is echoed in the span below */ 
     optionsCaption: '-- Select Project --' 
    " 
></select> 

<b>Selected Project:</b> <span data-bind="text: selectedProject"></span> 

Come si ottiene la voce di menu selezionato per visualizzare nel giro, e per inviare al server? (Presumo che l'osservabile che renderò nello span sia lo stesso che pubblicheremo.) Ho bisogno di un'altra proprietà nello ProjectFilterItem, come this.selected = ko.observable(false);? In tal caso, come dovrei dichiararlo come obiettivo del valore?

Answer 1

Hai solo bisogno di utilizzare con la value binding per associare il valore selezionato:

Dal options documentation:

Nota: per un elenco di selezione multipla, per impostare quale delle opzioni sono selezionato, o per leggere quale delle opzioni è selezionata, utilizzare selectedOptions binding. Per un elenco a selezione singola, è anche possibile leggere e scrivere l'opzione selezionata utilizzando il valore vincolante.

Nel tuo esempio:

<select 
    id  = "projectMenu" 
    name  = "projectMenu" 
    data-bind = " 
     value: selectedProject, 
     options:  projectFilters, 
     optionsText: 'Name', 
     optionsValue: 'Id', 
     optionsCaption: '-- Select Project --' 
    " 
></select> 

Vedi Demo.