Select ViewModel 中列表中的列表将选项呈现为“[object Window]”

Question

我想在我的视图中创建一个 select 列表，允许客户从该 select 列表中选择客户。

我的视图模型如下所示：

public int SalesOrderId { get; set; }
public int CustomerId { get; set; }
public string PONumber { get; set; }
public DateTime OrderDate { get; set; }

public List<Customer> Customers { get; set; }
public List<SalesOrderItemViewModel> SalesOrderItems { get; set; }

我的客户模型如下所示：

public int CustomerId { get; set; }
public string CustomerName { get; set; }

我的淘汰赛js是这样的：

SalesOrderViewModel = function (data) {
    var self = this;
    // This automatically creates my view model properties for ko from my view model passed from the server
    ko.mapping.fromJS(data, salesOrderItemMapping, self);

    // .... Other save functions etc.
};

[编辑] 请求的销售项目映射

var salesOrderItemMapping = {
    'SalesOrderItems': {
        // key for each child
        key: function (salesOrderItem) {
            return ko.utils.unwrapObservable(salesOrderItem.SalesOrderItemId);
        },
        // Tell knockout what to fo for each sales order item it needs to create
        create: function (options) {
            // create a new sales order item view model using the model passed to the mapping definition
            return new SalesOrderItemViewModel(options.data); // Notice data is a property of the options object
            // Moreover, data is the data for this child and options is the object containing the parent
        }
    }
};

[编辑] @Html.Raw（数据）按要求：

{"SalesOrderId":1,"CustomerId":1,"PONumber":"123456","OrderDate":"2015-01-25T00:00:00","MessageToClient":"The original value of Customer Name is Ashfield Clutch Services.","ObjectState":0,"Customer":{"CustomerId":1,"CustomerName":"Ashfield Clutch Services"},"SalesOrderItems":[{"SalesOrderItemId":1,"ProductCode":"ABC","Quantity":10,"UnitPrice":1.23,"SalesOrderId":1,"ObjectState":0},{"SalesOrderItemId":2,"ProductCode":"XYZ","Quantity":7,"UnitPrice":14.57,"SalesOrderId":1,"ObjectState":0},{"SalesOrderItemId":3,"ProductCode":"SAMPLE","Quantity":3,"UnitPrice":15.00,"SalesOrderId":1,"ObjectState":0}],"SalesOrderItemsToDelete":[],"Customers":[{"CustomerId":1,"CustomerName":"Ashfield Clutch Services"},{"CustomerId":3,"CustomerName":"Davcom-IT Ltd"},{"CustomerId":2,"CustomerName":"Fluid Air Conditioning"}]}

在我的视图顶部，我有这个 js：

<script src="~/Scripts/salesOrderViewModel.js"></script>
<script type="text/javascript">
    var salesOrderViewModel = new SalesOrderViewModel(@Html.Raw(data));
    ko.applyBindings(salesOrderViewModel);
</script>

如果我将 select 列表绑定到视图模型中的 Customers 集合，select 列表似乎没有正确绑定：

<select class="form-control" name="Customers" id="Customers" data-bind="options: Customers, optionsText: CustomerName, optionsValue: CustomerId, value: CustomerId"></select>

您可以看到，它没有显示客户，而是为所有客户显示“[object Window]”。我认为它可能已经完成了一半，因为它显示了正确的“[object Window]”数量与数据库中的客户端数量。

我知道 Customers 必须是一个淘汰赛可观察数组，但我不确定如何将其应用到我的 js 视图模型。

如有任何帮助，我们将不胜感激。

Answer 1

在将客户绑定到 select 下拉菜单时，您需要进行一项更改

您现有的代码

<select class="form-control" name="Customers" id="Customers" data-bind="options: Customers, optionsText: CustomerName, optionsValue: CustomerId, value: CustomerId"></select>

进行以下更改

<select class="form-control" name="Customers" id="Customers" data-bind="options: salesOrderViewModel.Customers, optionsText: Customers.CustomerName, optionsValue: Customers.CustomerId, value: CustomerId"></select>

options: salesOrderViewModel.Customers

它应该适合你。

Answer 2

您是否在选项文本和选项值中缺少“”？

<select class="form-control" name="Customers" id="Customers" data-bind="options: Customers, optionsText: "CustomerName", optionsValue: "CustomerId", value: CustomerId"></select>

Select ViewModel 中列表中的列表将选项呈现为“[object Window]”

Select List from List in ViewModel presenting options as "[object Window]"

c#

asp.net-mvc

knockout.js