设置击倒中的下拉列表与对象的绑定 [英] Set the binding of a dropdown in knockout to an object

问题描述

我试图将一个下拉列表(kendo下拉列表)用于完整对象的绑定设置.我正在使用Knockout-Kendo完成绑定，但是我认为剑道材料或淘汰赛剑道材料不是我遇到的问题.

I am trying to trying to set a the binding a drop down list (kendo drop down) uses to a full object. I am using Knockout-Kendo to accomplish the binding but I don't think the kendo stuff or knockout-kendo stuff is a factor in my problem.

例如，我有以下对象

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
    }
  ]
  }
}

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

I use the knockout-mapping plugin to turn all the stuff into an observable.

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

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

我的html绑定看起来像这样

My html binding looks like this

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

但是我想用

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"​​之类的数据设置属性

I can only figure out how to set the property with data like '1' or 'New Client 1/30/2013'

*编辑 我之所以设计这种外观，是因为我对实体框架缺乏经验.如果我有一个外键，并且在发送给客户端的模型中有一个与该外键绑定的对象.当调用SaveChanges()时，更新外键而不更新模型会导致模型上不一致的状态异常.我认为现在最好的方法是创建一个没有那些对象的ViewModel(仅包含ForeignKey ID).

* Edit I am trying to design this because my lack of experience with Entity Framework. If I have a foreign key and an object that is tied to the foreign key in my model that is sent to the client. Updating the foreign key but not the model causes inconsistent state exception on the model when calling SaveChanges(). I think my best approach now is to create a ViewModel without those objects (only containing the ForeignKey Ids).

推荐答案

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

This Kendo UI widget does not support setting the value as an object. You would need to set the value to a unique key (ClientId) and then use a computed observable to retrieve the actual object.

类似于: 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);

这篇关于设置击倒中的下拉列表与对象的绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！