Javascript 如何在knockout js中将数据绑定到网格中的下拉列表

我对击倒js还不熟悉。我已经成功地完成了几个简单的示例，这次尝试使用asp.net Web Api 2作为后端服务来完成一个稍微复杂的示例。我在后端使用以下数据结构

public class Customer
{


    public int CustomerID { get; set; }
    public string CustomerName { get; set; }
    public string NIC { get; set; }
    public DateTime DateOfBirth { get; set; }
    public decimal Salary { get; set; }
    public int DepartmentID { get; set; }
    public List<CustomerAddress> CustomerAddresses { get; set; }
}

public class CustomerAddress
{

    public int CustomerAddressID { get; set; }
    public int CustomerID { get; set; }
    public int CustomerAddressTypeID { get; set; }
    public string Address { get; set; }

}

public class CustomerAddressType
{
    public int CustomerAddressTypeID { get; set; }
    public string  CustomerAddressTypeName { get; set; }
}

公共类客户
{
public int CustomerID{get；set；}
公共字符串CustomerName{get；set；}
公共字符串NIC{get；set；}
公共日期时间出生日期{get；set；}
公共十进制工资{get；set；}
public int DepartmentID{get；set；}
公共列表CustomerAddresses{get；set；}
}
公共类CustomerAddress
{
public int CustomerAddressID{get；set；}
public int CustomerID{get；set；}
public int CustomerAddressTypeID{get；set；}
公共字符串地址{get；set；}
}
公共类CustomerAddressType
{
public int CustomerAddressTypeID{get；set；}
公共字符串CustomerAddressTypeName{get；set；}
}

客户可以有多个地址，每个地址都有CustomerAddressType。我想从后端获取一个customer对象，并在下面的视图中编辑特定的customer。可以在底部网格中添加和删除地址

Javascript视图模型

$(document).ready(function () {
InitiCustomerViewModel();
GetCustomer();
});


function InitiCustomerViewModel() {
    customerViewModel = new CustomerViewModel();
    ko.applyBindings(customerViewModel);
    customerViewModel.CustomerID(customerID);
}

function CustomerViewModel() {
    this.CustomerID = ko.observable("");
    this.CustomerName = ko.observable("");
    this.NIC = ko.observable("");
    this.DateOfBirth = ko.observable("");
    this.Salary = ko.observable("");
    this.DepartmentID = ko.observable("");
    this.CustomerAddresses = ko.observableArray("");
    this.DepartmentList = ko.observableArray("");
    this.AddressTypeList = ko.observableArray("");
    console.info(this.AddressTypeList());
}

function GetCustomer() {
    GetDepartmentList();
    GetAddressTypeList();
    if (customerViewModel.CustomerID() > 0) {
        var jqxhr = $.get("/api/CustomerApi/GetCustomer?customerID=" + customerViewModel.CustomerID(), null, function (res) {
            LoadCustomerCompleted(res);
        },
       "json"
       ).fail(function (response) {
           alert("Request Failed");
       });
    }
}

function GetDepartmentList() {
    var jqxhr = $.get("/api/CustomerApi/GetDepartmentList", null, function (res) {
        customerViewModel.DepartmentList.removeAll();
        for (i = 0; i < res.length; i++) {
            customerViewModel.DepartmentList.push(res[i]);
        }
    },
     "json"
     ).fail(function (response) {
         alert("Request Failed");
     });
}

function GetAddressTypeList() {
    var jqxhr = $.get("/api/CustomerApi/GetAddressTypeList", null, function (responce) {
        customerViewModel.AddressTypeList.removeAll();
        for (i = 0; i < responce.length; i++) {

            customerViewModel.AddressTypeList.push(responce[i]);
        }
    },
     "json"
     ).fail(function (response) {
         alert("Request Failed");
     });
}


function LoadCustomerCompleted(response) {
    customerViewModel.CustomerID(response.CustomerID);
    customerViewModel.CustomerName(response.CustomerName);
    customerViewModel.NIC(response.NIC);
    customerViewModel.Salary(response.Salary);
    customerViewModel.DepartmentID(response.DepartmentID);
    customerViewModel.DateOfBirth(response.DateOfBirth);
    customerViewModel.CustomerAddresses.removeAll();
    for (i = 0; i < response.CustomerAddresses.length; i++) {
        customerViewModel.CustomerAddresses.push(response.CustomerAddresses[i]);
    }

}

$（文档）.ready（函数（）{
initicCustomerViewModel（）；
GetCustomer（）；
});
函数initicCustomerViewModel（）{
customerViewModel=新customerViewModel（）；
ko.应用绑定（CustomServiceWModel）；
customerViewModel.CustomerID（CustomerID）；
}
函数CustomerViewModel（）{
this.CustomerID=ko.可观察（“”）；
this.CustomerName=ko.observable（“”）；
this.NIC=ko.可观察（“”）；
this.DateOfBirth=ko.可观察（“”）；
该工资=可观察的高工资（“”）；
this.DepartmentID=ko.可观察（“”）；
this.CustomerAddresses=ko.observearray（“”）；
this.DepartmentList=ko.observableArlay（“”）；
this.AddressTypeList=ko.observableArray（“”）；
console.info（this.AddressTypeList（））；
}
函数GetCustomer（）{
GetDepartmentList（）；
GetAddressTypeList（）；
如果（customerViewModel.CustomerID（）>0）{
var jqxhr=$.get（“/api/CustomerApi/GetCustomer？customerID=“+customerViewModel.customerID（），null，函数（res）{
装载客户完成（res）；
},
“json”
).失败（功能（响应）{
警报（“请求失败”）；
});
}
}
函数GetDepartmentList（）{
var jqxhr=$.get（“/api/CustomerApi/GetDepartmentList”），null，函数（res）{
customerViewModel.DepartmentList.removeAll（）；
对于（i=0；i

HTML视图

@model KnockoutJSWithWebAPI.Models.Customer

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>CustomerMaintanance</h2>

    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        <div class="form-group">
            @Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="text" class="form-control" data-bind="value: CustomerName" />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.NIC, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="text" class="form-control" data-bind="value: NIC" />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="text" class="form-control" data-bind="value: DateOfBirth" />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Salary, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="text" class="form-control" data-bind="value: Salary" />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DepartmentID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
               <select class="form-control" data-bind="options: DepartmentList, optionsText: 'DepartmentName', optionsValue:'DepartmentID', value: DepartmentID, optionsCaption: '--Select a Department--'"></select>
            </div>
        </div>
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <td>Adrress Type</td>
                        <td>Address</td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: CustomerAddresses">
                    <tr>
                        <td>
                            <select class="form-control" data-bind="options: $root.AddressTypeList, optionsText: $root.AddressTypeList. CustomerAddressTypeName,  value: $data.CustomerAddressTypeID, optionsCaption: '--Select Address Type--'"></select>
                        </td>
                        <td data-bind="text: Address"></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Add Address" class="btn btn-default" />
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>

<script type="text/javascript">
    var customerID = "@Model.CustomerID";
</script>
<script type="text/javascript" src="@Url.Content("~/ViewModels/CustomerMaintanance.js")">
</script>

@model KnockoutJSWithWebAPI.Models.Customer
@{
Layout=“~/Views/Shared/_Layout.cshtml”；
}
客户维护
@Html.AntiForgeryToken（）
顾客

@LabelFor（model=>model.CustomerName，htmlAttributes:new{@class=“controllabel col-md-2”}）
@LabelFor（model=>model.NIC，htmlAttributes:new{@class=“controllabel col-md-2”}）
@LabelFor（model=>model.DateOfBirth，htmlAttributes:new{@class=“controllabel col-md-2”}）
@LabelFor（model=>model.Salary，htmlAttributes:new{@class=“controllabel col-md-2”}）
@LabelFor（model=>model.DepartmentID，htmlAttributes:new{@class=“controllabel col-md-2”}）
阿德里斯型
地址
var customerID=“@Model.customerID”；

除网格中的AddressType下拉列表外，所有字段都已正确绑定。它显示[object，object]，而不是CustomerAddressTypeName。

---

请帮助我找出应用程序中的问题。

下拉列表中的“optionsText”绑定使用字符串作为包含显示文本的属性名称。它可能应该读“optionsText:'CustomerAddressTypeName'”而不是“optionsText:$root.AddressTypeList.CustomerAddressTypeName”

我也尝试过“CustomerAddressTypeName”，但它不起作用。实际上，我在JavaScript模型上看不到该属性，因此您需要共享它所在的代码，或者