javascript - Knockout.js select数据绑定(bind)值未读取但已写入

这是我的HTML代码：

<!-- ko foreach: warehouseOrders().StoreOrders -->
                    <tr>
                        <td>
                            <b data-bind="text: Product"></b>
                        </td>
                        <td>
                            <b data-bind="text: Store"></b>`enter code here`
                        </td>
                        <td>
                            <b data-bind="text: Quantity"></b>
                        </td>
                        <td>
                            <select data-bind=" value: OrderStatusId , options: $parent.orderStatuses(), optionsText: 'Status', optionsValue: 'Id'"></select>
                            <b data-bind="text: OrderStatusId"></b>
                        </td>
                    </tr>
                    <!--/ko-->

因此，StoreOrders包含所有属性：Product，Store，Quantity，OrderStatusId。

特定的问题：选择选项：$parent.orderStatuses()包含orderstatuses（Id，Status）的列表。我为选择设置文本和值属性。一切正常，选择一个选项时，将其写入对象的OrderStatusId属性，但最初，OrderStatusId包含一个值，该敲除应在选择中读取并设置。因此，当我打开时，应该在该值上进行选择。

这些是模型：

主班：

public class WarehouseDTO
    {
        public System.Guid Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public List<StoreOrderDTO> StoreOrders { get; set; }
        public List<StoreWarehouseDTO> StoreWarehouses { get; set; }
        public List<WarehouseProductDTO> WarehouseProducts { get; set; }
    }

和StoreOrderDTO

public class StoreOrderDTO
    {
        public System.Guid Id { get; set; }
        public string Product { get; set; }
        public string Store { get; set; }
        public string Warehouse { get; set; }
        public int Quantity { get; set; }
        public System.Guid OrderStatusId { get; set; }
    }

Javascript：

self.warehouseOrdersRequest = function (item) {
        ajaxHelper('/api/OrderStatus', 'GET').done(function (data) {
            self.orderStatuses(data);
        });
        self.warehouseOrders(item);
    }

这里item表示1个WarehouseDTO类型的对象，而OrderStatuses被赋予对象数组{Id，Status}

表的完整代码

<!--ko if : warehouseOrders()-->
    <div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title"><b data-bind="text: warehouseOrders().Name"></b> - Orders</h2>
                </div>
                <table class="table">
                    <tr>
                        <th>
                            @Html.DisplayName("Product")
                        </th>
                        <th>
                            @Html.DisplayName("Store")
                        </th>
                        <th>
                            @Html.DisplayName("Quantity")
                        </th>
                        <th>
                            @Html.DisplayName("Order Status")
                        </th>
                    </tr>

                    <!-- ko foreach: warehouseOrders().StoreOrders -->
                    <tr>
                        <td>
                            <b data-bind="text: Product"></b>
                        </td>
                        <td>
                            <b data-bind="text: Store"></b>
                        </td>
                        <td>
                            <b data-bind="text: Quantity"></b>
                        </td>
                        <td>
                            <select data-bind=" value: OrderStatusId , options: $parent.orderStatuses(), optionsText: 'Status', optionsValue: 'Id'"></select>
                            <b data-bind="text: OrderStatusId"></b>
                        </td>
                    </tr>
                    <!--/ko-->
                </table>
            </div>
            <a href="#" data-bind="click: closeWarehouseOrders" class="btn btn-defaul">Cancel</a>
            <a href="#" data-bind="click: saveWarehouseOrders" class="btn btn-defaul">Save</a>
        </div>
    </div>
    <!--/ko-->

我发现，选择一个项目并将其写入OrderStatusId之后，会显示<b data-bind="text: OrderStatusId"></b>（以前没有），是的，我确定其中有一个值。

最佳答案

因为orderStatuses是异步加载的，而当前状态不是，所以敲除无法正确初始化<select>数据绑定：

<select data-bind=" value: OrderStatusId , options: $parent.orderStatuses(), optionsText: 'Status', optionsValue: 'Id'"></select>

绑定时，$parent.orderStatuses()是一个空数组。 OrderStatusId是一个字符串。没有用于查找用于设置初始值的option.Id == value的选项。

当更新可观察选项数组时，敲除显然不会重试以将当前选定的值与新选项之一匹配。 （需要引用，我试图查找源以进行备份，但是找不到足够快的时间...）

解决此问题的一种方法是通过防止<select>尚未加载时初始化statuses：

<!-- ko if: orderStatuses().length -->
<select data-bind="options: orderStatuses"></select>
<!-- /ko -->

您可以在下面的示例中看到此修复程序。删除虚拟if绑定元素时，您将看到不再设置初始状态。另外，当交换setItem和setStatuses的顺序时，您会注意到您不再需要多余的if-bind。

var vm = {
  item: ko.observable(),
  statuses: ko.observableArray([])
}

ko.applyBindings(vm);

var setItem = function() {

  vm.item({
    orders: ko.observableArray([{
        text: "Item 1",
        status: ko.observable(0)
      }, {
        text: "Item 2",
        status: ko.observable(1)
      }

    ])
  });
}

var setStatuses = function() {
  vm.statuses([{
    label: "Status 0",
    id: 0
  }, {
    label: "Status 1",
    id: 1
  }]);
}

setItem();
setStatuses();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!-- ko if: item -->
<ul data-bind="foreach: item().orders">
  <li>
    <div data-bind="text: text"></div>

    <!-- ko if: $parent.statuses().length -->
    <select data-bind="options: $parent.statuses, value: status, optionsText: 'label', optionsValue: 'id'"></select>
    <strong data-bind="text: 'status: ' + status()"></strong>
    <!-- /ko -->
  </li>
</ul>
<!-- /ko -->