Xác định trước giá trị đã chọn trong danh sách thả xuống

Question

Tôi có vấn đề sau:

Tôi có một đối tượng quan sát được ở định dạng { isSelected: false, Message: "Test1" }, { isSelected: true, Message: "Test2"}. Tôi đang tạo một danh sách lựa chọn trong khung nhìn từ mảng quan sát này. Tôi muốn giá trị với thuộc tính isSelected = true để được chọn trước (sẽ là: Message: "Test2" trong ví dụ này). Đây là mã của tôi:

Knockout:

function ViewModel() 
{ 

    this.DummyOptions = ko.observableArray([{ isSelected: false, Message: "Test1" }, { isSelected: true, Message: "Test2"}]); 
    this.selectedValue = ko.observable(); 
} 

ko.applyBindings(new ViewModel()); 

Html:

<div> 
Dummy 
<select id="dummy" data-bind="options: DummyOptions, optionsText: 'Message'"></select> 
</div> 

Fiddle: http://jsfiddle.net/PsyComa/RfWVP/52/

Tôi tin rằng đây sẽ là đơn giản nhưng tôi rất mới để knockout và tôi đã không thể làm cho nó hoạt động như mong đợi. Bất kỳ trợ giúp nào với mã làm việc sẽ được đánh giá cao. Cảm ơn bạn.

Answer 1

Bạn nói đúng, điều này thực sự rất đơn giản với knockout.js.

Một quan sát được có thể được liên kết với các tùy chọn hiện đang được chọn bằng cách sử dụng "giá trị" ràng buộc:

<select data-bind="options: DummyOptions, 
        optionsText: 'Message', 
        value: selectedValue"></select> 

Bây giờ, chỉ cần sử dụng các đối tượng với "isSelected == true" làm giá trị ban đầu của quan sát này:

function ViewModel() { 
    this.DummyOptions = ko.observableArray([...]); 

    // Filter the array to find the first element with isSelected == true 
    var selectedOption = ko.utils.arrayFirst(this.DummyOptions(), function(item) { 
     return item.isSelected; 
    }); 

    // Use this option as the initial value 
    this.selectedValue = ko.observable(selectedOption); 
} 

http://jsfiddle.net/RfWVP/54/