如何從knockout.js observableArray中獲取選定的菜單選項？

Question

我覺得我錯過了一些非常基本的東西，但我無法得到一個下拉菜單，因爲我期望使用Knockout.js。

我有一組對象我想要在菜單中呈現，我需要找到選定的選項並將其發佈到服務器。我可以讓菜單呈現，但似乎無法獲取所選項目的值。我的視圖模型是這樣的：

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

和我的觀點的標記看起來像這樣：

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

如何獲得所選擇的菜單項中的跨度顯示，並張貼到服務器？ （我假設我在span中呈現的觀察值與我發佈的相同。）我是否需要ProjectFilterItem中的另一個屬性，如this.selected = ko.observable(false);？如果是這樣，我將如何宣佈它是價值的目標？

Answer 1

你只需要與value binding使用選定的值綁定：

從options documentation：

注：對於多選列表，設置其中的選項是選擇 ，或者要閱讀選擇哪個選項，請使用 selectedOptions綁定。對於單選列表，您還可以讀取 並使用值綁定編寫選定的選項。

在您的例子：

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

見Demo。