Làm thế nào để có được tùy chọn trình đơn được lựa chọn từ một ObservableArs knockout.js?

Question

Tôi cảm thấy như tôi đang thiếu một cái gì đó rất cơ bản, nhưng tôi không thể có được một trình đơn thả xuống để làm việc như tôi mong đợi bằng cách sử dụng Knockout.js.

Tôi có một tập hợp các đối tượng mà tôi muốn hiển thị trong menu và tôi cần tìm tùy chọn đã chọn và đăng lên máy chủ. Tôi có thể nhận được menu để hiển thị, nhưng dường như không thể nhận được giá trị của mục đã chọn. mô hình quan điểm của tôi trông như thế này:

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

và đánh dấu quan điểm của tôi trông như thế này:

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

Làm thế nào để có được các mục trình đơn lựa chọn để hiển thị trong khoảng thời gian, và để gửi đến máy chủ? (Tôi giả định rằng tôi có thể quan sát được trong khoảng thời gian đó là một cái tôi muốn đăng.) Tôi có cần một tài sản khác trong số ProjectFilterItem, như this.selected = ko.observable(false); không? Nếu vậy, làm thế nào tôi sẽ khai báo nó như là mục tiêu của giá trị?

Answer 1

Bạn chỉ cần sử dụng với value binding để ràng buộc giá trị được chọn:

Từ options documentation:

Lưu ý: Đối với một danh sách chọn nhiều, để thiết lập mà trong những lựa chọn là chọn, hoặc để đọc tùy chọn nào trong số các tùy chọn được chọn, hãy sử dụng các liên kết selectedOptions được chọn. Đối với danh sách chọn một, bạn cũng có thể đọc và viết tùy chọn đã chọn bằng cách sử dụng giá trị giá trị ràng buộc.

Trong ví dụ của bạn:

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

Xem Demo.