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

Question

I am working on select input drop-down with knockoutJs but Option values are empty when using data-bind=with in knockoutJs. Can any one help me on this.

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

Displaying data by using below 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>

Up to now everything is working fine, but in the select drop down value="" is empty, if i use optionsValue: 'name' in the input type select , then values are rendering fine but data-bind="with: preferedTimeToPickupVal is not working where i want to display the data.

Any help would be appreciated.

Answer 1

Your code works fine, make sure you are using this correctly:

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

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

Edit

Ok, I think I understood what you want. Please see my updated fiddle .

Basically, if you want to have the value attribute for every option node in your select tag, you have to use the optionsValue: 'name' option in the option binding.

By doing that, you are now storing the name property of the object, instead of the full object. You now have to find a way to fetch the correct object in your array, that match the selected value.

To do that, you could instroduce a temporary varialbe that hold your selection, and a computed observable that will filter the array when the selection change, and get the right object.

<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

You just need to add optionsValue: price and use pureComputed to get the right information based on the selected value.

 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>