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

Question

我在将选择框的选定值绑定(bind)到 View 模型中的属性时遇到问题。由于某种原因，它在发布回服务器时保持不变。

我的 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 未绑定(bind)到正确选择的下拉值。我是否需要执行任何其他功能才能正确绑定(bind)等？或者告诉数据绑定(bind)选择值列是什么(Id)等？我已经在 Fiddler 中检查了从浏览器发回的值，它具有相同的原始值 (0)。所以它肯定不是服务器。

我希望有人可以提供帮助，如果您需要任何进一步的信息，请询问。

亲切的问候
菲尔

Answer 1

问题是您的 options binding 将尝试将其绑定(bind)到的对象分配给值 observable指定的。

例如，如果您选择“A Ref Type”，options绑定(bind)将推送 json 对象

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

进入您的 Task.ReferenceTypeId 可观察对象，然后将其序列化回您的服务器。在这种情况下，您需要添加一个 optionsValue 配置选项来告诉绑定(bind)只是为了保存 id。

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

这是一个例子。

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

希望这可以帮助。