javascript - 使用 knockout 选项时如何更新对象实例的属性而不是原始列表？

Question

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

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

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

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);

谢谢!

Answer 1

您试图用一个个可观察对象来表示两个个领域概念:

1. 初始/要价(？)价格；
2. 出价；

我认为您需要一个单独的构造函数来用于 bid observables。您可以从汽车中“分拆”出价，并使用汽车的价格作为起始出价。如果将汽车的 select 绑定(bind)到计算的可写可观察量，则可以使用 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 -->