在 knockoutJs 中使用 data-bind=with 时，选项值为空

Question

我正在使用 knockoutJs 处理选择输入下拉菜单，但在 knockoutJs 中使用 data-bind=with 时，选项值为空。谁能帮我解决这个问题。

Dropdown.html

 <span class="price"><select data-bind="options: preferedTimeToPickup,optionsCaption: 'Dont Know or Does not Matter',
    optionsText: 'name',value: preferedTimeToPickupVal" id="u3413_input" ></select>
    </span>

自定义.js

    this.preferedTimeToPickup = 
    [{name:"Morning (8-11)",price:5},
     {name:"Lunch (11-2)",price:6},
     {name:"Afternoon (2-5)",price:7},
     {name:"Specific: 8:00",price:8.5},
     {name:"Specific: 9:00",price:9.5},
     {name:"Specific: 10:00",price:10.25},
     {name:"Specific: 11:00",price:11.25},
     {name:"Specific: 12:00",price:12.25},
     {name:"Specific: 1:00",price:13.25},
     {name:"Specific: 2:00",price:14.25},
     {name:"Specific: 3:00",price:15.25},
     {name:"Specific: 4:00 (closed at 4 on sat)",price:16.25}];

     this.preferedTimeToPickupVal = ko.observable();

使用下面的html显示数据

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

到目前为止一切正常，但在选择下拉列表中value="" 为空，如果我在input type select 中使用optionsValue: 'name'，则值呈现正常但data-bind="with: preferedTimeToPickupVal 无法在我想要的地方工作显示数据。

任何帮助将不胜感激。

Answer 1

Your code 工作正常，请确保您正确使用this：

var vm = function () {
    this.preferedTimeToPickup = [{
        name: "Morning (8-11)",
        price: 5
      }
      //...
    ]

    this.preferedTimeToPickupVal = ko.observable()
}
ko.applyBindings(new vm());

编辑

好的，我想我明白你想要什么了。请看my updated fiddle。

基本上，如果您想在select 标记中为每个option 节点添加value 属性，则必须在option 绑定中使用optionsValue: 'name' 选项。

通过这样做，您现在存储的是对象的名称属性，而不是完整的对象。您现在必须找到一种方法来获取数组中与所选值匹配的正确对象。

要做到这一点，您可以选择临时Varialbe，该临时Varialbe可容纳您的选择，以及将在选择变化时过滤阵列的计算机可观察到，并获取右侧对象。

<span class="price"><select data-bind="options: preferedTimeToPickup,
    optionsCaption: 'Dont Know or Does not Matter',
    optionsValue: 'name',
    optionsText: 'name',
    value: _preferedTimeToPickupVal" id="u3413_input" ></select>
</span>

var vm = function () {
    this.preferedTimeToPickup = [ {}, {} ]
    this._preferedTimeToPickupVal = ko.observable();
    this.preferedTimeToPickupVal = ko.pureComputed(function() {
      var selectedVal = this._preferedTimeToPickupVal()
      var defaultVal = { price: null, name: null }
      var found = null
      if (selectedVal) {
        found = this.preferedTimeToPickup.filter(function(i) {
          return i.name === selectedVal
        })
      }
      return found && found[0] ? found[0] : defaultVal
    }, this)
}

Answer 2

您只需添加optionsValue: price 并使用pureComputed 即可根据所选值获取正确的信息。

function viewModel () {
  var self = this;      
  self.preferedTimeToPickup = [
    {name:"Morning (8-11)",price:5},
    {name:"Lunch (11-2)",price:6},
    {name:"Afternoon (2-5)",price:7},
    {name:"Specific: 8:00",price:8.5},
    {name:"Specific: 9:00",price:9.5},
    {name:"Specific: 10:00",price:10.25},
    {name:"Specific: 11:00",price:11.25},
    {name:"Specific: 12:00",price:12.25},
    {name:"Specific: 1:00",price:13.25},
    {name:"Specific: 2:00",price:14.25},
    {name:"Specific: 3:00",price:15.25},
    {name:"Specific: 4:00 (closed at 4 on sat)",price:16.25}
  ];

  self.selectedPrice = ko.observable("");    

  // use this to get the selected value object and show it on the view
  self.preferedTimeToPickupVal = ko.pureComputed(function() {
    if(self.selectedPrice() !== "")
      return ko.utils.arrayFirst(self.preferedTimeToPickup, function(time) {
        return self.selectedPrice() === time.price;
      });
    return null;
  }, this);  
}

ko.applyBindings(new viewModel()); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<span class="price">
  <select data-bind="options: preferedTimeToPickup,optionsCaption: 'Dont Know or Does not Matter',
optionsText: 'name', optionsValue: 'price', value: selectedPrice" id="u3413_input" ></select>
</span>

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