knockoutjs映射选择数据绑定选项(knockoutjs mapping select data-bind options)

 我有问题将选择框的选定值绑定到视图模型中的属性。 出于某种原因，在回发到服务器时，它会保持不变。 
 
 我的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>
 
 来自Fiddler的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未绑定到正确选择的下拉值。 我是否需要执行任何附加功能来正确绑定等？ 或者告诉数据绑定什么是选择值列（Id）等？ 我已经在Fiddler中检查了从浏览器返回的值，并且它具有相同的原始值（0）。 所以它肯定不是服务器。 
 
 我希望有人可以提供帮助，如果您需要更多信息，请询问。 
 
 亲切的问候菲尔 

I am having problems binding the selected value of a selectbox to a property within the view model. For some reason it keeps coming back unchanged when posted back to the server.
 
My Html is:
 
<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>
 
The Javascript is:
 
<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 from Fiddler that gets loaded into the page as below.
 
{
   "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
}
 
This comes back into the server (ASP.NET MVC3) correctly, with the updated Reference string value, but ReferenceTypeId is not bound to the correctly selected drop down value. Do I need to perform any additional functions to bind correctly etc? Or tell the data-bind what the select value column is (Id) etc? I have checked in Fiddler on the values getting posted back from the browser, and it has the same original value (0). So it is definately not the server.
 
I hope someone can help, if you need any further information please ask.
 
Kind Regards Phil

原文：https://stackoverflow.com/questions/9746042