knockoutjsマッピング選択データバインドオプション

Question

選択ボックスの選択値をビューモデル内のプロパティにバインドする際に問題が発生しています。何らかの理由で、サーバーにポストバックしたときに変更されずに元の状態に戻ります。

私のHTMLは次のとおりです。

<form action="/Task/Create" data-bind="submit: save"> 

    <table border="1"> 
     <tr> 
      <td>ref type</td> 
      <td><select data-bind="options: ReferenceTypes, optionsText: 'Name', optionsCaption: 'Select...', value:Task.ReferenceTypeId"></select></td> 
      <td>Reference</td> 
      <td><input data-bind="value:Task.Reference" /></td> 
     </tr> 
    </table> 

    <button type="submit">Save Listings</button> 
</form> 

Javascriptがある：以下のようにページにロードされるフィドラーから

<script type="text/javascript"> 

    var viewModel = {}; 

    $.getJSON('/Task/CreateJson', function (result) { 
     viewModel = ko.mapping.fromJS(result.Data); 

     viewModel.save = function() { 
      var data = ko.toJSON(this); 
      $.ajax({ 
       url: '/Task/Create', 
       contentType: 'application/json', 
       type: "POST", 
       data: data, 
       dataType: 'json', 
       success: function (result) { 
        ko.mapping.updateFromJS(viewModel, result); 
       } 
      }); 
     } 

     ko.applyBindings(viewModel); 
    }); 

</script> 

JSON。

{ 
    "ContentEncoding":null, 
    "ContentType":null, 
    "Data":{ 
     "Task":{ 
     "ReferenceTypeId":0, 
     "Reference":"Default Value" 
     }, 
     "ReferenceTypes":[ 
     { 
      "Id":2, 
      "Name":"A Ref Type" 
     }, 
     { 
      "Id":3, 
      "Name":"B Ref Type" 
     }, 
     { 
      "Id":1, 
      "Name":"C Ref Type" 
     } 
     ] 
    }, 
    "JsonRequestBehavior":1 
} 

これは、更新された基準文字列の値を、正しくバックサーバー（ASP.NET MVC3）に入ってくるが、referenceTypeIDでは、値ダウン正しく選択ドロップにバインドされていません。正しくバインドするための追加機能を実行する必要がありますか？または、select-value列が（Id）であることをデータバインドに伝えますか？私は、ブラウザから戻ってくる値をFiddlerにチェックインし、元の値（0）と同じ値を持っています。したがって、それは確かにサーバーではありません。

さらなる情報が必要な場合は、お手数ですがお尋ねください。

種類よろしく フィル

Answer 1

問題が結合あなたoptionsが指定された値observableに、それがバインドされているオブジェクトを代入しようとするということです。例えば

あなたは「AのRefタイプ」optionsバインディングが戻ってサーバーにシリアライズされます、観察あなたTask.ReferenceTypeId中に、JSONオブジェクト

{ "Id":2, "Name":"A Ref Type" } 

をプッシュします選択した場合。この場合、optionsValueの設定オプションを追加して、idを保存するだけでバインディングに伝える必要があります。

<select data-bind="options: ReferenceTypes, optionsText: 'Name', 
optionsCaption: 'Select...', optionsValue: 'Id', value:Task.ReferenceTypeId"> 
</select> 

次に例を示します。

http://jsfiddle.net/madcapnmckay/Ba5gx/

は、この情報がお役に立てば幸いです。