将敲除中的下拉菜单绑定到对象

Posted 2023-03-27

【中文标题】将敲除中的下拉菜单绑定到对象

【英文标题】：Set the binding of a dropdown in knockout to an object

【发布时间】：2013-01-14 19:58:33

【问题描述】：

我正在尝试将下拉列表（剑道下拉列表）使用的绑定设置为完整对象。我正在使用 Knockout-Kendo 来完成绑定，但我不认为 kendo 的东西或 knockout-kendo 的东西是我的问题的一个因素。

例如我有以下对象

var model = 
  "Client": null,
  "Clients": [
    
      "CompanyAccount": 
        "RelationshipManager": ,
        "CompanyAccountId": 1,
        "Name": "My Company Name",
        "PhoneNumber": "[phone]",
        "Address": 
          "State": 
            "StateId": 6,
            "Name": "New York",
            "Abbreviation": "NY"
          ,
          "AddressId": 1,
          "Street1": "123 Any Street",
          "Street2": null,
          "City": "New York",
          "StateId": 6,
          "Zip": 12345
        
      ,
      "ClientId": 1,
      "Name": "New Client 1/30/2013",
      "CompanyAccountId": 1,
      "ContactName": null,
      "Salutation": null,
      "ClientAddress": null,
      "OfficePhoneNumber": null,
      "OfficePhoneExtension": null,
      "MobilePhoneNumber": null,
      "Email": null,
      "TrackingState": 0
    
  ]
  

我使用敲除映射插件将所有东西变成可观察的。

var viewModel = ko.mapping.fromJS(model); ko.applyBindings(viewModel);

我的 html 绑定看起来像这样

<select data-bind="kendoDropDownList:  dataTextField: 'Name', optionLabel: 'Select An Client...', dataValueField: 'ClientId', data: Clients, value: Client "></select>

但我想用类似的数据设置Client 属性

Client: 
  "CompanyAccount": 
    "RelationshipManager": ,
    "CompanyAccountId": 1,
    "Name": "My Company Name",
    "PhoneNumber": "[phone]",
    "Address": 
      "State": 
        "StateId": 6,
        "Name": "New York",
        "Abbreviation": "NY"
      ,
      "AddressId": 1,
      "Street1": "123 Any Street",
      "Street2": null,
      "City": "New York",
      "StateId": 6,
      "Zip": 12345
    
  ,
  "ClientId": 1,
  "Name": "New Client 1/30/2013",
  "CompanyAccountId": 1,
  "ContactName": null,
  "Salutation": null,
  "ClientAddress": null,
  "OfficePhoneNumber": null,
  "OfficePhoneExtension": null,
  "MobilePhoneNumber": null,
  "Email": null,
  "TrackingState": 0

我只能弄清楚如何使用“1”或“New Client 1/30/2013”​​之类的数据设置属性

* 编辑 我正在尝试设计这个，因为我缺乏使用实体框架的经验。如果我有一个外键和一个与我的模型中的外键绑定的对象，该外键会发送给客户端。调用 SaveChanges() 时更新外键但不更新模型会导致模型上出现不一致的状态异常。我认为我现在最好的方法是创建一个没有这些对象的 ViewModel（仅包含 ForeignKey Id）。

【参考方案1】：

此 Kendo UI 小部件不支持将值设置为对象。您需要将该值设置为唯一键 (ClientId)，然后使用计算出的 observable 来检索实际对象。

类似：http://jsfiddle.net/rniemeyer/xz2uY/

this.selectedId = ko.observable("2");
this.selectedChoice = ko.computed(function() 
    var id = this.selectedId();
    return ko.utils.arrayFirst(this.choices(), function(choice) 
       return choice.id ===  id;
    );
, this);

【讨论】：

谢谢。我试图以这种方式设计我的模型，因为我在实体框架保存我的数据时遇到了麻烦。我会发回选定的 ID（这是一个外键），但对象没有正确设置。我试图在我的 javascript 中处理这个问题，但我意识到我只需要创建一个 ViewModel 并且只将外键发送到客户端而不是模型。但我喜欢你的解决方案！很棒的工作！