ドロップダウン選択を使用してKnockoutJSのデフォルトでテキストボックスにデータを入力

Question

私は構築しているバックオフィスアプリでかなり簡単な注文作成フォームを持っています。私が理解できないシナリオは、フォームの「注文行」セクションの下にあります。私はそれがあなたがすべての製品を含むドロップダウンを含む行が表示される行を追加し、次に量と価格の2つのテキストボックスをクリックするようにします。製品が選択されたときに、価格が価格テキストボックスにデフォルト値として設定されていますが、その使用はまだ変更できます。

これまでのところ、行を追加することができます。部品を選択することができます。正しく行う方法を理解できないのは、デフォルト価格を設定することだけです。だから私のノックアウトviewModelのカットダウン版はこのように見える;

viewModel = { 
     Parts : ko.observableArray(initialData.Parts), 
     Sale : ko.observable(initialData.Sale), 
     SaleLines : ko.observableArray(initialData.SaleLines), 
     addRow: function() { 
       this.SaleLines.push({ Id: "00000000-0000-0000-0000-000000000000", SalePrice : 0.00, Qty : 1, PartId: "" }); 
       $("select").combobox({ 
        selected: function (event, ui) { 
         $(ui.item.parentNode).change(); 
        } 
       }); 
     }, 
     removeRow: function (r) { 
      this.SaleLines.remove(r); 
     } 
    } 

セールラインはこのようなテンプレートでレンダリングされます。

<script type="text/html" id="saleLineTemplate"> 
    <tr> 
     <td> 
      <select data-bind='options: viewModel.Parts, optionsText: "Description", optionsCaption: "Select...", optionsValue: "Id", value: PartId, uniqueName: true' class="mustPopulateDropdown"></select> 
     </td> 
     <td> 
      <input data-bind="value: Qty, uniqueName: true" class="required number"/> 
     </td> 
     <td> 
      <input data-bind="value: SalePrice, uniqueName: true" class="required number"/> 
     </td> 
     <td> 
      <a href="#" data-bind="click: function() { viewModel.removeRow($data) }">Delete</a> 
     </td> 
    </tr> 
</script> 

実際のPartsコレクションは、バックエンドMVCから来て、Id、Description、PriceだけのPartDTOを持つListとして渡されます。

私はちょうどこれを行うための正しい方法を考えることができません - 私は多分私はそれを作成したときに各SaleLineのIdフィールドを作ると思って何とかそれは更新時にSalePriceを更新する方法を考えることができませんそれを実装する？

ご協力いただきありがとうございます。

Answer 1

どのようにこのようなものについて：http://jsfiddle.net/rniemeyer/VLVuC/

基本的には、ドロップダウンリストの「値」は、対応するパートオブジェクトに設定されている「SelectedPart」観測可能であるので、それを作る：

<select data-bind='options: viewModel.Parts, optionsText: "Description", optionsCaption: "Select...", value: SelectedPart, uniqueName: true' class="mustPopulateDropdown"></select> 

その後SelectedPartを購読し、SelectedPart（）に基づいてSalePriceを設定します。

addRow: function() { 
    var newRow = { 
     Id: "00000000-0000-0000-0000-000000000000", 
     Qty: ko.observable(1), 
     SalePrice: ko.observable(0), 
     SelectedPart: ko.observable() 
    }; 

    newRow.SelectedPart.subscribe(function() { 
     this.SalePrice(this.SelectedPart() ? this.SelectedPart().Price : 0); 
    }, newRow); 

（彼らは「選択...」の行を選択しない限り）するたびに、行のドロップダウンの変更は、その後、SalePriceは、新しい選択された製品の価格にデフォルト設定されます。

これが役に立ちます。