Как рассчитать общее количество из списка

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> 

Я попытался с помощью ПОЛУЧИТЬ элемента по имени класса и он все еще не работает.

Answer 1

Здесь источник является Нокаут наблюдаемый массив, а источник данных dxList. Значение великих итогов хранится в переменной «total», которая вычисляется наблюдаемой в зависимости от «источника». Итак, как только «источник» изменяется, «итого» также пересчитывается.

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

Я попытался использовать элемент get по имени класса, и он все еще не работает.

Вы не должны пытаться получить данные с вашего вида; это уже в вашей модели просмотра!

This documentation page говорит, что вы можете получить массив предметов из своего экземпляра DataSource, вызвав метод items.

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