选择选项使用淘汰赛 - 剑道组合框

我正在创建kendo combo box using knockout MVVM。我期望的是选择选定的对象为this example（选择的包含对象，而不是属性）。这是我的代码（使用asp.net剃须刀）。 C＃代码：选择选项使用淘汰赛 - 剑道组合框

@{ 
    var accountExample = new List<BankAccountSetupViewModel>() 
    { 
     new BankAccountSetupViewModel { ID = 1, Bank = "ANZ Panin Bank", AccountName = "Primary", AccountNumber = "1234-567-890" }, 
     new BankAccountSetupViewModel { ID = 2, Bank = "ABN Amro Group", AccountName = "Backup", AccountNumber = "2345-678-901" }, 
     new BankAccountSetupViewModel { ID = 3, Bank = "Bank BRI", AccountName = "Cadangan", AccountNumber = "3456-789-012" }, 
     new BankAccountSetupViewModel { ID = 4, Bank = "Bank Central Asia Jakarta", AccountName = "Primary", AccountNumber = "4567-890-123" }, 
     new BankAccountSetupViewModel { ID = 5, Bank = "BNI", AccountName = "Backup", AccountNumber = "5678-901-234" } 
    }; 
}

HTML代码：

<fieldset id="form-container" data-bind="with: formEditorSettlement"> 
    <legend>Edit Detail</legend> 
    @Html.LabelFor(model => model.Amount) 
    <span style="margin-bottom: 20px;"> 
     @Html.TextBoxFor(model => model.Currency.Code, new { @readonly = true, data_bind = "value: currency", @style = "width: 50px;" }) 
     @Html.TextBoxFor(model => model.Amount, new { data_bind = "value: amount" }) 
    </span> 
    <div class="cols-2"> 
     <label class="cols-full">Bank Account</label><br /> 
     <label>Bank</label> 
     <span>@(Html.Kendo().ComboBox().Name("BankAccount").Suggest(true).Filter(FilterType.Contains).DataTextField("Name").DataValueField("ID").BindTo(accountExample).HtmlAttributes(new { @class = "no-input", style = "width: 300px;", data_bind = "kendoComboBox: { data: $root.accounts, value: $root.chosenBankAccount, dataTextField: 'Bank', dataValueField: 'ID' }" }))</span> 
     <label>Account No.</label> 
     <span>@Html.TextBoxFor(model => model.BankAccount, new { @readonly = true, data_bind = "value: $root.chosenBankAccount.AccountName" })</span> 
     <label>Account Name</label> 
     <span>@Html.TextBox("BankAccountName", null, new { @readonly = true, data_bind = "value: bankAccountName" })</span> 
    </div> 
</fieldset>

Javascript代码：

(function ($, ko, undefined) { 
    var viewModel = namespace('ViewModels.Activities'); 
    viewModel.SettlementSplitObservable = new (function (defaultSettlementSplit, defaultAccounts) { 
     var root = this; 
     //add isChecked to all item 
     ko.utils.arrayForEach(defaultSettlementSplit, function (item) { 
      item.isChecked = ko.observable(false); 
     }); 
     root.verifiedItems = ko.observableArray(defaultSettlementSplit); 
     root.lastAction = ko.observable('add'); 
     root.maxAmount = ko.observable(@(Model.Splitted[0].Amount)); 
     root.accounts = ko.mapping.fromJS(defaultAccounts); 
     root.chosenBankAccount = ko.observable(); 
     root.formEditorSettlement = new (function() { 
      var self = this; 
      self.currency = ko.observable('@Model.Currency.Code'); 
      self.amount = ko.observable(0); 
      self.bankNameBank = ko.observable(''); 
      self.bankAccountNo = ko.observable(''); 
      self.bankAccountName = ko.observable(''); 
      self.isEditMode = ko.observable(false); 
     }.bind(this)); 
    })(@Html.Raw(Json.Encode(Model.Splitted)), 
     @Html.Raw(Json.Encode(accountExample))); 
})(jQuery, ko)

我很期待是当组合框 “的BankAccount” 用户选择项目时，chosenBankAccount应包含“BankAccountSetupViewModel”（由C＃代码生成，使用挖空映射插件映射）的对象。任何方法将不胜感激。

来源

2013-03-05 iroel

Kendo组合框不支持选择整个对象。您可以指定dataValueField将该值设置为对象的唯一键（id）。然后，您可以创建一个ko.computed来表示所选对象。像：

this.choices = ko.observableArray([ 
    { id: "1", name: "apple"}, 
    { id: "2", name: "orange"}, 
    { id: "3", name: "banana"} 
]); 

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

样品在这里：http://jsfiddle.net/rniemeyer/zbEQC/

来源

2013-03-05 14:46:52

选择选项使用淘汰赛 - 剑道组合框

回答

相关问题