如何从列表中计算总计

Question

我正在手机上制作POS应用程序，我有一个问题。 如何从数据库中的项目列表计算总计？ 这是我的代码

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>

我已经尝试过通过类名使用get元素，但仍然无法正常工作。

Answer 1

我已经尝试过通过类名使用get元素，但仍然无法正常工作。

您不应该尝试从视图中获取数据。 它已经在您的viewmodel中！

本文档页面告诉我，您可以通过调用items方法从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;
});

Answer 2

在这里，源是一个Knockout可观察数组和dxList数据源。 总计的值存储在“ total”变量中，该变量是根据“ source”计算得出的。 因此，一旦“源”被更改，“总计”也将被重新计算。

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