当 ObservableArray 更改时，剔除下拉值不会更改答案

【问题标题】：Knockout Dropdown Values Not Changing When ObservableArray Changed当 ObservableArray 更改时，剔除下拉值不会更改
【发布时间】：2014-10-02 01:28:30
【问题描述】：

我有一个绑定到可观察数组的元素，但是当可观察数组中的值更改时，下拉列表不会更改。我究竟做错了什么？我希望能够选择一个可观察对象，更改其值之一并让下拉列表反映更改。在 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>

提前谢谢你

【问题讨论】：

标签： knockout.js

【解决方案1】：

programDescriptions 需要是可观察的，因此当值更改时视图会更新...

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

Updated Fiddle

【讨论】：

【解决方案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>

【讨论】：