knockoutjs映射选择数据绑定选项

我遇到了将选择框的选定值绑定到视图模型中的属性的问题。出于某种原因，它在发回服务器时会保持不变。knockoutjs映射选择数据绑定选项

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

我希望有人可以提供帮助，如果您需要更多信息，请询问。

亲切的问候菲尔

来源

2012-03-17 Phil

的问题是，你的options绑定将尝试分配，它结合了，到指定的值observable的对象。

例如，如果你选择“A REF类型的” options结合将推动JSON对象

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

进入你的Task.ReferenceTypeId观察到随后将被序列化回您的服务器。在这种情况下，您需要添加一个optionsValue配置选项来告诉绑定仅用于保存该id。

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

下面是一个例子。

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

希望这有助于。

来源

2012-03-17 00:31:21 madcapnmckay

我认为这将是简单的事情！测试和工作:)我敢肯定，我看了文档上的额外选项，但认为特定的设置是用于多选框。好吧。真的很感激你的时间疯狂:) – Phil 2012-03-17 06:54:21

knockoutjs映射选择数据绑定选项

回答

相关问题