Jak uzyskać wybraną opcję menu z pliku knockout.js observableArray?

Question

Czuję, że brakuje mi czegoś bardzo prostego, ale nie mogę dostać menu rozwijanego do pracy, ponieważ oczekuję użycia Knockout.js.

Mam zestaw obiektów, które chcę przedstawić w menu i muszę znaleźć wybraną opcję i opublikować ją na serwerze. Mogę wyświetlić menu do renderowania, ale nie mogę uzyskać wartości wybranego elementu. Moim zdaniem modelka wygląda następująco:

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

i moim zdaniem znaczników wygląda następująco:

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

Jak dostać wybrana pozycja menu wyświetlanych w rozpiętości, i odpowiedzieć na serwerze? (Zakładam, że obserwowalne renderowanie w tym zakresie jest tym samym, które opublikowałem.) Czy potrzebuję innej właściwości w ProjectFilterItem, np. this.selected = ko.observable(false);? Jeśli tak, jak zgłosiłbym to jako cel wartości?

Answer 1

Wystarczy skorzystać z value binding powiązać wybraną wartość:

Z options documentation:

Uwaga: Dla wielu liście wyboru, aby określić, które opcje są wybrany, lub aby odczytać, która z opcji jest wybrana, użyj powiązania selectedOptions. W przypadku listy pojedynczego wyboru można również odczytać i zapisać wybraną opcję, korzystając z wartości wiążącej wartość .

W przykładzie:

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

Zobacz Demo.