Wie man ausgewählte Menüoption von einem knockout.js observableArray erhält?

Question

Ich habe das Gefühl, dass ich etwas sehr Grundlegendes verpasse, aber ich kann kein Dropdown-Menü finden, um zu funktionieren, wie ich Knockout.js benutze.

Ich habe eine Reihe von Objekten, die ich in einem Menü anzeigen möchte, und ich muss die ausgewählte Option finden und diese an den Server senden. Ich kann das Menü zum Rendern bringen, aber es scheint nicht möglich zu sein, den Wert des ausgewählten Elements zu erhalten. Meine Ansicht Modell sieht wie folgt aus:

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

und meiner Meinung nach Markup sieht wie folgt aus:

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

Wie bekommt der ausgewählte Menüpunkt in der Spanne angezeigt werden, und an den Server zu schreiben? (Ich nehme an, dass das Observable, das ich in der Spanne rende, dasselbe ist, das ich posten würde.) Brauche ich eine andere Eigenschaft in der ProjectFilterItem, wie this.selected = ko.observable(false);? Wenn ja, wie würde ich es als das Ziel des Wertes erklären?

Answer 1

Sie müssen nur mit dem value binding verwenden den gewählten Wert zu binden:

Vom options documentation:

Hinweis: Eine Multi-Select-Liste, welche der Optionen einzustellen sind ausgewählt, oder um zu lesen, welche der Optionen ausgewählt sind, verwenden Sie die selectedOptions-Bindung. Für eine Einfachauswahlliste können Sie auch lesen und die ausgewählte Option mit dem Wertbindung schreiben.

In Ihrem Beispiel:

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

Siehe Demo.