如何從列表中計算總計

Question

我正在手機上創建一個POS應用程序，我有一個問題。我如何從數據庫中的項目列表中計算總數？ 這裏是我的代碼

訂單detail.dxview

POSApp.OrderDetail = function (params, viewInfo) { 
    "use strict"; 

    var id = params.id, 
     order = new POSApp.OrderViewModel(), 
     isReady = $.Deferred(), 
     // Item List 
     shouldReload = false, 
     dataSourceObservable = ko.observable(), 
     dataSource; 

    function handleViewShown() { 
     POSApp.db.Orders.byKey(id).done(function (data) { 
      order.fromJS(data); 
      isReady.resolve(); 
     }); 

     // Item List 
     if (!dataSourceObservable()) { 
      dataSourceObservable(dataSource); 
      dataSource.load().always(function() { 
       isReady.resolve(); 
      }); 
     } 
     else if (shouldReload) { 
      refreshList(); 
     } 
     // Item List 
    } 

    // Item List 
    function handleViewDisposing() { 
     POSApp.db.OrderDetails.off("modified", handleOrderDetailsModification); 
    } 

    function handleOrderDetailsModification() { 
     shouldReload = true; 
    } 
    // Item List 

    dataSource = new DevExpress.data.DataSource({ 
     store: POSApp.db.OrderDetails, 
     map: function (item) { 
      return new POSApp.OrderDetailViewModel(item); 
     }, 
     expand: ["Item"], 
     sort: { field: "OrderDetailId", desc: false }, 
     filter: ["OrderId", parseInt(id)] 
    }); 

    POSApp.db.OrderDetails.on("modified", handleOrderDetailsModification); 

    var viewModel = { 
     grandTotal: ko.observable(total), 
     handleDelete: function() { 
      DevExpress.ui.dialog.confirm("Are you sure you want to delete this item?", "Delete item").then(function (result) { 
       if (result) 
        handleConfirmDelete(); 
      }); 
     }, 
     handleConfirmDelete: function() { 
      POSApp.db.Orders.remove(id).done(function() { 
       if (viewInfo.canBack) { 
        POSApp.app.navigate("Orders", { target: "back" }); 
       } 
       else { 
        POSApp.app.navigate("Blank", { target: "current" }); 
       } 
      }); 
     }, 

     //Item List 
     refreshList: function() { 
      shouldReload = false; 
      dataSource.pageIndex(0); 
      dataSource.load(); 
     }, 
     //Item List 

     // Return 
     id: id, 
     order: order, 
     viewShown: handleViewShown, 
     isReady: isReady.promise(), 
     // Item List 
     dataSource: dataSourceObservable, 
     viewDisposing: handleViewDisposing, 
     // Item List 
     // Return 
    }; 

    return viewModel; 
}; 

訂單detail.js

<div data-options="dxView : { name: 'OrderDetail', title: 'Order' } " > 
    <div data-bind="dxCommand: { onExecute: '#OrderEdit/{id}', direction: 'none', id: 'edit', title: 'Edit', icon: 'edit' }"></div> 
    <div data-bind="dxCommand: { onExecute: handleDelete, id: 'delete', title: 'Delete', icon: 'remove' }"></div> 
    <div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-detail-view dx-content-background" data-bind="dxDeferRendering: { showLoadIndicator: true, staggerItemSelector: 'dx-fieldset-header,.dx-field', animation: 'detail-item-rendered', renderWhen: isReady }" > 
     <div data-bind="dxScrollView: { }"> 
      <div class="dx-fieldset"> 
       <div class="dx-fieldset-header" data-bind="text: order.PhoneNumber"></div> 
       <div class="dx-field"> 
        <div class="dx-field-label">Order id</div> 
        <div class="dx-field-value-static" data-bind="text: order.OrderId"></div> 
       </div> 
       <div class="dx-field"> 
        <div class="dx-field-label">Phone number</div> 
        <div class="dx-field-value-static" data-bind="text: order.PhoneNumber"></div> 
       </div> 
       <div class="dx-field"> 
        <div class="button-info" data-bind="dxButton: { text: 'Add Item', onClick: '#AddItem/{id}', icon: 'add', type: 'success' }"></div> 
        <!-- Item List --> 
        <div data-bind="dxList: { dataSource: dataSource, pullRefreshEnabled: true }"> 
         <div data-bind="dxAction: '#OrderDetailDetails/{OrderDetailId}'" data-options="dxTemplate : { name: 'item' } "> 
          <!--<div class="list-item" data-bind="text: Item().ItemName"></div> 
          <div class="list-item" style="float:right;" data-bind="text: Amount"></div>--> 
          <div class="item-name" data-bind="text: Item().ItemName"></div> 
          <div class="item-amount" data-bind="text: Amount"></div> 
          <div class="clear-both"></div> 
         </div> 
        </div> 
       </div> 
       <div class="dx-field"> 
        <div class="dx-field-label">Grand total</div> 
        <!--<div class="dx-field-value-static" data-bind="text: order.GrandTotal"></div>--> 
        <div class="dx-field-value-static" data-bind="text: grandTotal"></div> 
       </div> 
      </div> 
      <div data-options="dxContentPlaceholder : { name: 'view-footer', animation: 'none' } " ></div> 
     </div> 
    </div> 
</div> 

我已經通過類名和使用get元素嘗試它仍然不起作用。

Answer 1

在此，源是可觀察到的敲除陣列和dxList數據源。總計值存儲在「總計」變量中，這是根據「來源」計算出的可觀察值。所以，一旦「源」發生變化，「總數」也會重新計算。

var grandTotal = ko.observable(0); 
dataSource = new DevExpress.data.DataSource({ 
    // ... 
    onChanged: function() { 
     grandTotal(0); 
     var items = dataSource.items(); 
     for (var i = 0; i < items.length; i++) { 
      grandTotal(grandTotal() + items[i].Amount()); 
     } 
    } 
}); 


return { 
    // ... 
    grandTotal: grandTotal 
}; 

Answer 2

我已經嘗試通過類名稱使用獲取元素，它仍然無法正常工作。

您不應該嘗試從您的視圖中獲取數據;它已經在你的viewmodel中！

This documentation page告訴我，通過調用items方法，您可以從DataSource實例中獲得一系列物品。

從數據源的map功能，您text: Amount數據綁定，我想每一個項目可能有一個Amount財產持有一個整數。

grandTotal可以是一個計算，增加了這些值一起，每當dataSourceObservable變化：

grandTotal: ko.computed(function() { 
    var total = 0; 
    var currentDS = dataSourceObservable(); 

    if (currentDS) { 
    var currentItems = currentDS.items(); 
    total = currentItems.reduce(function(sum, item) { 
     return sum + item.Amount; 
    }, total); 
    } 

    return total; 
});