如何在使用敲除選項時更新對象實例而不是原始列表的屬性？

我有一個簡單的例子，其中一個對象的基本列表（比方說汽車）綁定到一個select（下拉列表）。一旦用戶選擇它，他可以改變車的價格（出價）。如何在使用敲除選項時更新對象實例而不是原始列表的屬性？

但是，當更改所選值的價格時，用於填充選擇的原始列表也會更新。有沒有辦法分離或克隆選定的值，所以它不會影響原始數組？

整個想法是使用一個數組作爲用戶選擇的基礎，以便他可以在所選實例中自定義他想要的任何屬性，並在原始列表中選擇而不是。

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

謝謝！

來源

2015-07-04 tucaz

你試圖代表與域概念一個觀察到：（？）

初始/要價;
投標;

我認爲你需要一個獨立的構造函數bid observables。您可以從汽車中「分拆」出價，並將該車的價格作爲出價。如果將汽車的select綁定到計算的可寫可觀察值，則可以使用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 -->

來源

2015-07-04 23:53:50 Jeroen

保存與原來的價格一個額外的變量，並改變計算觀察到：

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

在這種情況下，說明總回報原始值，不管self.Price（）是否改變。

修改後的示例位於：http://jsfiddle.net/zhqvt56c/4/

來源

2015-07-06 04:45:43 jparaya

如何在使用敲除選項時更新對象實例而不是原始列表的屬性？

回答

相關問題