Knockout ObservableArray.replace（）函数不会更新'optionsText'绑定

Question

我试图通过替换knockout observable数组中的选项来刷新select控件中的选项条目的状态。但是，似乎这不起作用。有关此示例，请参阅以下JSFiddle。

http://jsfiddle.net/oneaj4z6/1/

var ViewModel = function() {
  	var item1 = {
      id: ko.observable(1),
      firstName: ko.observable('Tim'),
      lastName: ko.observable('Mit')
    };
  	item1.optionsText = ko.computed(function() {
      return item1.firstName() + ' ' + item1.lastName();
    });
    item1.optionsValue = ko.computed(function() {
      return item1.id();
    });
    
    this.items = ko.observableArray([
    	item1
    ]);
  
    this.onButton1Click = function (elem) {
      console.log("Clicked 1");
      item1.firstName(new Date().getTime());
    };
  
    this.onButton2Click = function (elem) {
      console.log("Clicked 2");

      var item1Replaced = {
        id: ko.observable(1),
        firstName: ko.observable('REPLACED'),
        lastName: ko.observable('YEAH!')
      };
      item1Replaced.optionsText = ko.computed(function() {
        return item1.firstName() + ' ' + item1.lastName();
      });
      item1Replaced.optionsValue = ko.computed(function() {
        return item1.id();
      });
      console.dir(item1);
      console.dir(item1Replaced);
      this.items.replace(item1, item1Replaced);
      
    };

    this.selectedItem = ko.observable(undefined);
};
 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<select data-bind="options: items, value: selectedItem, optionsText: 'optionsText', optionsValue: 'optionsValue'"></select>
<br />
<button type="button" data-bind="click: onButton1Click">Modify Array Item</button>
<br />
<button type="button" data-bind="click: onButton2Click">Replace Array Item</button>

Answer 1

更新：来自@ Sam.C的这个小提琴（http://jsfiddle.net/oneaj4z6/4/）解决了这个问题。

它可能只是一个忽略，但你指的是计算定义中的item1实例（在你的替换点击处理程序定义中），下面的代码应该替换select项。

var ViewModel = function() {
  	var item1 = {
      id: ko.observable(1),
      firstName: ko.observable('Tim'),
      lastName: ko.observable('Mit')
    };
  	item1.optionsText = ko.computed(function() {
      return item1.firstName() + ' ' + item1.lastName();
    });
    item1.optionsValue = ko.computed(function() {
      return item1.id();
    });
    
    this.items = ko.observableArray([
    	item1
    ]);
  
    this.onButton1Click = function (elem) {
      console.log("Clicked 1");
      item1.firstName(new Date().getTime());
    };
  
    this.onButton2Click = function (elem) {
      console.log("Clicked 2");

      var item1Replaced = {
        id: ko.observable(1),
        firstName: ko.observable('REPLACED'),
        lastName: ko.observable('YEAH!')
      };
      item1Replaced.optionsText = ko.computed(function() {
        return item1Replaced.firstName() + ' ' + item1Replaced.lastName();
      });
      item1Replaced.optionsValue = ko.computed(function() {
        return item1Replaced.id();
      });
      console.dir(item1);
      console.dir(item1Replaced);
      this.items.replace(item1, item1Replaced);
      
    };

    this.selectedItem = ko.observable(undefined);
};
 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<select data-bind="options: items, value: selectedItem, optionsText: 'optionsText', optionsValue: 'optionsValue'"></select>
<br />
<button type="button" data-bind="click: onButton1Click">Modify Array Item</button>
<br />
<button type="button" data-bind="click: onButton2Click">Replace Array Item</button>