녹아웃을 사용하여 데이터베이스에서 DropDownList로 데이터로드

Question

녹아웃을 사용하여 가변 길이 목록을 편집하고 있습니다. Add Button을 클릭하면 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

어딘가에 목록을 캐시해야합니다. 부모보기 모델과 같은 것으로 선호합니다. 벨로우즈보기.

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); 
};