Question

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

当ObservableArray更改时，Knockout下拉值不会更改

2 个答案: