0

ノックアウトMVVMを使用して剣道コンボボックスを作成しています。私が期待しているのは、この例として選択されたオブジェクトを選択することです（chosenTicketには、プロパティに固有ではなく、オブジェクトが含まれています）。これが私のコードです（asp.net razorを使用）。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)

私が期待しているのは、ユーザーがComboBox "BankAccount"でアイテムを選択するとき、chooseBankAccountには'BankAccountSetupViewModel'（C＃コードから生成され、ノックアウトマッピングプラグインを使用してマッピングされた）のオブジェクトが含まれている必要があります。任意のアプローチをいただければ幸いです。

4

1 に答える 1

2

剣道コンボボックスは、オブジェクト全体の選択をサポートしていません。を指定し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-05T14:46:52.390 に答える