Question

我正在使用knockoutJs选择输入下拉列表，但在knockoutJs中使用data-bind =时，Option值为空。任何人都可以帮助我。

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>

Custom.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=""为空，如果我在optionsValue: 'name'中使用input type select，则值正常，但{{1}在我想显示数据的地方不起作用。

任何帮助都将不胜感激。

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。

基本上，如果您希望value标记中的每个option节点都拥有select属性，则必须使用{{1}中的optionsValue: 'name'选项绑定。

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

要做到这一点，你可以引入一个保存你选择的临时变量，以及一个计算的observable，它将在选择改变时过滤数组，并获得正确的对象。

option

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

在knockoutJs

2 个答案: