使用剔除选项时如何更新对象实例而不是原始列表的属性？答案

【问题标题】：How to update property on object instance instead of original list when using knockout options?使用剔除选项时如何更新对象实例而不是原始列表的属性？
【发布时间】：2015-09-22 09:58:52
【问题描述】：

我有一个简单的案例，其中对象的基本列表（比如说汽车）绑定到一个选择（下拉列表）。一旦用户选择它，他就可以更改汽车的价格（出价）。

但是，当更改所选值的价格时，用于填充选择的原始列表也会更新。有没有办法分离或克隆所选值，使其不会影响原始数组？

整个想法是使用一个数组作为用户选择的基础，这样他就可以在所选实例中自定义他想要的任何属性，而不是在原始列表中。

I have a working fiddle here 代码如下：

HTML:

Select a car:<select data-bind="options: availableCars, optionsText: 'Description', value: selectedCar"></select><br/>
You selected: <span data-bind="text: selectedCar().Description"></span>
<br/>
Bid a price: <input type="text" data-bind="value: selectedCar().Price" />

JS：

var carsListingViewModel = function(availableCars) {
    var self = this;

    self.availableCars = availableCars;
    self.selectedCar = ko.observable();
};

var car = function(make, model, price) {
    var self = this;

    self.Make = ko.observable(make);
    self.Model = ko.observable(model);
    self.Price = ko.observable(price);
    self.Description = ko.computed(function() {
        return self.Make() + ' ' + self.Model() + ' - ' + self.Price();        
    });
};

var allCars = [
    new car('Hyundai', 'i30', 100),
    new car('Chrysler', '300C', 200)
];

var model = new carsListingViewModel(allCars);
ko.applyBindings(model);

谢谢！

【问题讨论】：

标签： javascript html knockout.js binding

【解决方案1】：

您正在尝试用一个 observable 表示两个域概念：

初始/询问（？）价格；
出价；

我认为您需要为 bid observables 提供单独的构造函数。您可以从汽车“分拆”出价，并使用汽车的价格作为起始出价。如果您将汽车的 select 绑定到计算的可写 observable，您可以使用 write 位在汽车发生变化时创建新的出价。

类似这样的：

var carsListingViewModel = function(availableCars) {
    var self = this;
    
    self.availableCars = availableCars;
    self.currentBid = ko.observable(null);
    
    _selectedCar = ko.observable();
    self.selectedCar = ko.computed({
      read: _selectedCar,
      write: function(newValue) {
        if (newValue !== _selectedCar()) {
          _selectedCar(newValue);
          self.currentBid(new bid(newValue));
        }
      }
    });
};

var car = function(make, model, price) {
    var self = this;
    
    self.Make = ko.observable(make);
    self.Model = ko.observable(model);
    self.Price = ko.observable(price);
    self.Description = ko.computed(function() {
        return self.Make() + ' ' + self.Model() + ' - ' + self.Price();        
    });
};

var bid = function(car) {
    var self = this;
  
    self.bid = ko.observable(car.Price());
    self.car = ko.observable(car);
};
  
ko.applyBindings(new carsListingViewModel([
    new car('Hyundai', 'i30', 100),
    new car('Chrysler', '300C', 200)
]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Select a car:<select data-bind="options: availableCars, optionsText: 'Description', value: selectedCar"></select><br/>
<hr/>
<!-- ko with: currentBid -->
You selected: <span data-bind="text: car().Description"></span>.
Bid a price: <input type="text" data-bind="value: bid" />
<!-- /ko -->

【讨论】：

【解决方案2】：

使用原始价格保存一个附加变量，并更改计算出的 observable：

var car = function(make, model, price) {
  var self = this;

  self.Make = ko.observable(make);
  self.Model = ko.observable(model);
  self.initialPrice = price;
  self.Price = ko.observable(price);
  self.Description = ko.computed(function() {
      return self.Make() + ' ' + self.Model() + ' - ' + self.initialPrice;
  });
};

在这种情况下，Description 始终返回原始值，无论 self.Price() 是否更改。

修改后的示例在这里：http://jsfiddle.net/zhqvt56c/4/

【讨论】：