knockoutJs ko.utils.arrayFirst不允許重複的值作爲結果

Question

我是新來的knockoutJs，因爲我試圖通過綁定顯示選定的值。但是我面臨着重複值問題。

例如：

• 按照下面的示例代碼段，如果我從下拉列表中選擇一個，所述結合結果作爲選擇顯示名「一」，這是正確的。

{名稱： 「一」，價格：32.50}，{名稱： 「兩節」，價格：32.50}，

• 後，如果我選擇從下拉等選項即名字二，綁定結果不會顯示名稱二選擇，而是繼續顯示name =「one」，這是不正確的。
• 觀察：我發現這是由於所有期權價格設置相同的價格，如果我用不同的價格更新它們，期權價值正確地約束。
• 在這裏，我的困惑是，當價格相同但名稱不同時，爲什麼綁定邏輯不能正確應用。

我想通過下面的代碼來實現這一點。

的Html

<select data-bind="options: beforeEventPedersensDropoffCustomerLocation,optionsCaption: 'Please Choose Closest Location', 
    optionsText: 'name', optionsValue: 'price', value: selectedPricebepdcl" id="before_event_pedersens_dropoff_customer_location_time" ></select> 

的js

self.beforeEventPedersensDropoffCustomerLocation = [ 
    {name:"one",price:32.50}, 
    {name:"two",price:32.50}, 
    {name:"three",price:32.50}, 
    {name:"four",price:32.50}, 
    {name:"five",price:32.50}, 
    {name:"six",price:32.50}, 
    {name:"seven",price:0} 
    ]; 
    self.selectedPricebepdcl = ko.observable(""); 

    console.log() 
    self.beforeEventVal = ko.computed(function() { 
    if(self.selectedPricebepdcl() !== "") 
     return ko.utils.arrayFirst(self.beforeEventPedersensDropoffCustomerLocation, function(time) { 
     return self.selectedPricebepdcl() === time.price; 
     }); 
    return null; 
    }, this); 

結果

  <p data-bind="with: beforeEventVal"> 
       <span data-bind="text: name"></span> 
      </p> 
      <p data-bind="with: beforeEventVal"> 
       <span data-bind="text: price"></span> 
      </p> 

任何人都可以幫助我在此。

Answer 1

問題是你已經設置了optionsValue: 'price'，所以你選擇的唯一信息是價格。然後，嘗試使用它從可用項目中找到所選項目，但不能這樣做，因爲它不是唯一標識符。

相反，如果您未指定optionsValue，則Knockout將使用整個項目作爲選擇的值。這也可以讓你避免查找選定的值，因爲你有選定的值。

function VM() { 
 
    self = this; 
 
    self.beforeEventPedersensDropoffCustomerLocation = [{ 
 
     name: "one", 
 
     price: 32.50 
 
    }, 
 
    { 
 
     name: "two", 
 
     price: 32.50 
 
    }, 
 
    { 
 
     name: "three", 
 
     price: 32.50 
 
    }, 
 
    { 
 
     name: "four", 
 
     price: 32.50 
 
    }, 
 
    { 
 
     name: "five", 
 
     price: 32.50 
 
    }, 
 
    { 
 
     name: "six", 
 
     price: 32.50 
 
    }, 
 
    { 
 
     name: "seven", 
 
     price: 0 
 
    } 
 
    ]; 
 
    self.selectedBepdcl = ko.observable(""); 
 
    self.selectedName = ko.pureComputed(() => { 
 
    const sb = self.selectedBepdcl(); 
 

 
    return sb && sb.name ? sb.name : ''; 
 
    }); 
 
} 
 

 
ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<select data-bind="options: beforeEventPedersensDropoffCustomerLocation, 
 
    optionsCaption: 'Please Choose Closest Location', 
 
    optionsText: 'name', 
 
    value: selectedBepdcl" id="before_event_pedersens_dropoff_customer_location_time"> 
 
</select> 
 
<p data-bind="with: selectedBepdcl"> 
 
    <span data-bind="text: name"></span> 
 
</p> 
 
<p data-bind="with: selectedBepdcl"> 
 
    <span data-bind="text: price"></span> 
 
</p> 
 
Pretend this is hidden: 
 
<input data-bind="value: selectedName">