knockoutJsでdata-bind = withを使用すると、オプション値が空になる

Question

knockoutJsでselect入力ドロップダウンを処理していますが、knockoutJsでdata-bind = withを使用するとOption値が空です。誰も私にこれを手伝うことができますか？

今ではすべてが正常に動作しているまで、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> 

の下に使用してデータを表示する

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

が、選択ドロップでにoptionsValue: 'name'を使用すると、value=""が空になりますの場合、値はうまく表示されますが、データを表示する場所ではdata-bind="with: preferedTimeToPickupValが機能しません。

ご協力いただければ幸いです。

Answer 1

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>

Answer 2

Your code正常に動作し、あなたが正しくthisを使用していることを確認してください。

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

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

編集

[OK]を、私は私はあなたが欲しいものを理解すると思います。 my updated fiddleをご覧ください。あなたはselectタグ内のすべてのノードoptionためvalue属性を持つようにしたい場合は

は基本的に、あなたはバインディングoptionでoptionsValue: 'name'オプションを使用する必要があります。

このようにすると、オブジェクト全体ではなくオブジェクトのnameプロパティが保存されるようになります。選択した値に一致する配列内の正しいオブジェクトを取得する方法を見つける必要があります。

これを行うには、選択範囲を保持する一時変数と、選択が変更されたときに配列をフィルタリングして正しいオブジェクトを取得する計算対象オブザーバブルを生成することができます。

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