Knockout.js映射选择数据绑定选项 [英] knockoutjs mapping select data-bind options

问题描述

我在将选择框的选定值绑定到视图模型内的属性时遇到问题.由于某些原因，它在发布回服务器后会保持不变.

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.

我的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是:

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>

来自Fiddler的JSON，如下所示加载到页面中.

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
}

这将使用更新的参考字符串值正确返回服务器(ASP.NET MVC3)，但是ReferenceTypeId不会绑定到正确选择的下拉值.我是否需要执行任何其他功能才能正确绑定等?还是告诉数据绑定什么是选择值列(Id)等?我已经在Fiddler中检查了从浏览器发回的值，它具有相同的原始值(0).所以绝对不是服务器.

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.

亲切问候 菲尔

推荐答案

问题是您的options绑定将尝试将其绑定到的对象分配给指定的值observable.

The issue is that your options binding will try to assign the object that it is bound to, to the value observable specified.

例如，如果您选择"A Ref Type"，则options绑定将推送json对象

For example if you select "A Ref Type" the options binding will push the json object

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

可观察到Task.ReferenceTypeId，然后将其序列化回服务器.在这种情况下，您需要添加optionsValue配置选项来告诉绑定只保存ID.

Into your Task.ReferenceTypeId observable which will then be serialized back to your server. In this case you need to add an optionsValue config options to tell the binding just to save the id.

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

这是一个例子.

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

希望这会有所帮助.

这篇关于Knockout.js映射选择数据绑定选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！