如何从列表中计算总计

Question

I'm making an POS application on mobile phone and I have a question. How do I calculate the grand total from the list of item from the database? Here's my code

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

order-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>

I've tried by using get element by class name and it still doesn't work.

Answer 1

I've tried by using get element by class name and it still doesn't work.

You shouldn't try to get the data from your view; it's already in your viewmodel!

This documentation page tells me you can get an array of items from your DataSource instance by calling the items method.

From your data source's map function and your text: Amount data-bind, I figured each item probably has an Amount property which holds an integer.

grandTotal can be a computed that adds these values together whenever dataSourceObservable changes:

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

Answer 2

Here, the source is a Knockout observable array and the dxList data source. A value of grand totals is stored in the 'total' variable which is a computed observable depending on 'source'. So, once 'source' is changed, 'total' is re-calculated as well.

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