javascript - 使用 Knockout 将数据从数据库加载到 DropDownList

Question

我正在使用 knockout 创建编辑可变长度列表。当我单击“添加按钮”时，它将在屏幕上添加一个 DropDownList 和一个 TextBox。我已成功将数据从数据库加载到 DropDownList，但每次我单击“添加”按钮时它总是填充数据。

代码:

<div class="form-horizontal" data-bind="with: purchaseOrder">
    <h4>Purchase Order</h4>
    <hr />

    <div class="form-group">
        <label class="control-label col-md-2" for="PurchaseOrderDate">PO Date</label>
        <div class="col-md-10">
            <input class="form-control" data-bind="value: PurchaseOrderDate" placeholder="Purchase Order Date" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="InvoiceNo">Invoice No</label>
        <div class="col-md-10">
            <input class="form-control" data-bind="value: InvoiceNo" placeholder="Invoice No" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="Memo">Memo</label>
        <div class="col-md-10">
            <input class="form-control" data-bind="value: Memo" placeholder="Enter Memo" />
        </div>
    </div>
</div>

<h4>Details</h4>
<hr />

<table class="table">
    <thead>
        <tr>
            <th>Item Name</th>
            <th>Qty Order</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: purchaseOrderDetails">
        <tr>
            <td>
                <select class="form-control" data-bind="options: AX_INVENTSUMs, optionsText: 'ITEMNAME', optionValue: 'ITEMID'"></select>
            </td>
            <td>
                <input class="form-control" data-bind="value: QuantityOrder" placeholder="Enter Quantity Order">
            </td>
            <td>
                <a class="btn btn-sm btn-danger" href='#' data-bind=' click: $parent.removeItem'>X</a>
            </td>
        </tr>
    </tbody>
</table>

<p>
    <button class="btn btn-sm btn-primary" data-bind='click: addItem'>Add Item</button>
</p>

@section Scripts {
    @Scripts.Render("~/bundles/knockout")
    <script>
        $(function () {
            var PurchaseOrder = function (purchaseOrder) {
                var self = this;

                self.PurchaseOrderID = ko.observable(purchaseOrder ? purchaseOrder.PurchaseOrderID : 0);
                self.PurchaseOrderDate = ko.observable(purchaseOrder ? purchaseOrder.PurchaseOrderDate : '');
                self.InvoiceNo = ko.observable(purchaseOrder ? purchaseOrder.InvoiceNo : '');
                self.Memo = ko.observable(purchaseOrder ? purchaseOrder.Memo : '');
            };

            var PurchaseOrderDetail = function (purchaseOrderDetail, items) {
                var self = this;

                self.PurchaseOrderDetailID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.PurchaseOrderDetailID : 0);
                self.PurchaseOrderID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.PurchaseOrderDetailID : 0);
                self.ItemID = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.ItemID : 0);
                self.QuantityOrder = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.QuantityOrder : 0);
                self.QuantityBonus = ko.observable(purchaseOrderDetail ? purchaseOrderDetail.QuantityBonus : 0);

                self.AX_INVENTSUMs = ko.observableArray(items);
            };

            var PurchaseOrderCollection = function () {
                var self = this;

                self.purchaseOrder = ko.observable(new PurchaseOrder());
                self.purchaseOrderDetails = ko.observableArray([new PurchaseOrderDetail()]);

                self.CashedArray = ko.observableArray([]);
                $.getJSON("/AX_INVENTSUM/GetAX_INVENTSUMs", null, function (data) {
                    var array = [];
                    $.each(data, function (index, value) {
                        array.push(value);
                    });
                    self.CashedArray(array);
                });

                self.addItem = function () {
                    self.purchaseOrderDetails.push(new PurchaseOrderDetail(null, self.CashedArray));
                };

                self.removeItem = function (purchaseOrderDetail) {
                    self.purchaseOrderDetails.remove(purchaseOrderDetail);
                };
            };

            ko.applyBindings(new PurchaseOrderCollection());
        });
    </script>
}

正如您在上面的代码中看到的，如何使这种情况每次只发生一次？

Answer 1

您必须将列表缓存在某处。我更喜欢在父 View 模型之类的东西中执行此操作。见下文。

var OrderList = function(){
    var self = this;
    ...
    self.CashedArray = ko.observableArray(new Array());
    $.getJSON("/AX_INVENTSUM/GetAX_INVENTSUMs", null, function (data) {
        var array = [];
        $.each(data, function (index, value) {
            array.push(value);
        });
        self.CashedArray(array);
    });
    self.AddButtonClick = function (){
       var orderDetails = new PurchaseOrderDetail(self.CashedArray());
    };
};

var PurchaseOrderDetail = function (items) {
    var self = this;
    ...
    self.AX_INVENTSUMs = ko.observableArray(items);
};