javascript - KnockoutJs ko.utils.arrayFirst 不允许重复值作为结果

Question

我是 knockoutJs 的新手，因为我正在尝试通过绑定(bind)显示选定的值。但我面临着重复值的问题。

例如:

• 根据下面的示例片段，如果我从下拉列表中选择一个，绑定(bind)结果将显示所选名称“one”，这是正确的。

{name:"one",price:32.50}, {name:"two",price:32.50},

• 之后，如果我从下拉列表中选择其他选项，即名称二，绑定(bind)结果不会显示所选的名称二，而是继续仅显示名称=“一”，这是不正确的。
• 观察结果:我发现出现这种情况是因为所有选项值设置了相同的价格，如果我使用不同的价格更新它们，选项值就会正确绑定(bind)。
• 我的困惑是，为什么当价格值相同但名称不同时绑定(bind)逻辑无法正确应用。

我试图通过下面的代码来实现这一点。

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">