當ObservableArray改變時Knockout Dropdown值不會改變

Question

我有一個綁定到observable數組的元素，但是當observable數組中的值發生更改時，下拉列表不會更改。我究竟做錯了什麼？我希望能夠選擇一個可觀察對象，更改其中的一個值並使其下拉反映這些更改。在jsfiddle中，只需在下拉列表中選擇一個值，更改文本，然後單擊更新。

jsFiddle

的Javascript：

var ViewModel = function() { 
    self.programs = ko.observableArray([ 
     {programId: 1, programDescription: 'One'}, 
     {programId: 2, programDescription: 'Two'}, 
     {programId: 3, programDescription: 'Three'} 
    ]); 
    self.program = ko.observable(); 

    self.saveProgram = function() { 

     for (i = 0; i < self.programs().length - 1 ; i++) { 
      if (self.programs()[i].programId == self.program().programId) { 
       self.programs()[i].programDescription = 
        self.program().programDescription; 
       alert(self.programs()[i].programDescription); 
      } 
     } 

    }; 

}; 

ko.applyBindings(new ViewModel()); 

HTML：

<div> 
    <select data-bind="options: programs, 
         optionsText: 'programDescription', 
         value: program"></select> 
</div> 
<div> 
    Update Program Description: <input type="text" data-bind="value: program().programDescription" /> 
    <button type="button" data-bind="click: saveProgram">Update</button> 
</div> 

預先感謝您

Answer 1

programDescription的需要是可觀，所以當值的更新視圖改變...

self.programs = ko.observableArray([ 
    {programId: 1, programDescription: ko.observable('One')}, 
    {programId: 2, programDescription: ko.observable('Two')}, 
    {programId: 3, programDescription: ko.observable('Three')} 
]); 

Updated Fiddle

Answer 2

如果你只是讓現場觀察到，你會被直接改變字段（它會在選擇更新），這將讓你擺脫save功能和Update按鈕。

然後提出您是否希望能夠編輯cancel的問題，其中我建議您諮詢Simple Editor pattern。

var Item = function (args) { 
 
    return { 
 
    programId: args.programId, 
 
    programDescription: ko.observable(args.programDescription) 
 
    } 
 
} 
 

 
var ViewModel = function() { 
 
var self = this; 
 
self.programs = ko.observableArray([ 
 
new Item({programId: 1, programDescription: 'One'}), 
 
new Item({programId: 2, programDescription: 'Two'}), 
 
new Item({programId: 3, programDescription: 'Three'})]); 
 
self.program = ko.observable(); 
 
self.editContainer = ko.observable(); 
 
self.program.subscribe(function (nv) { 
 
    self.editContainer(ko.toJS(nv)) 
 
}) 
 
self.cancel = function() { 
 
    self.editContainer(null); 
 
    self.program(null) 
 
} 
 
self.update= function() { 
 
    self.program().programDescription(self.editContainer().programDescription) 
 
    self.program(null) 
 
}; 
 
}; 
 

 
ko.applyBindings(new ViewModel()); 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div> 
 
<select data-bind="options: programs, 
 
        optionsText: 'programDescription', 
 
        optionsCaption: 'Choose...', 
 
        value: program"></select> 
 
</div> 
 
<div data-bind='with: editContainer'> 
 
<fieldset> 
 
    <legend>Editor</legend>Program Description: 
 
    <input type="text" data-bind="value: programDescription" /> 
 
    <br/> 
 
    <button type="button" data-bind="click: $root.update">Update</button> 
 
    <button type="button" data-bind="click: $root.cancel">Cancel</button> 
 
</fieldset> 
 
</div>