javascript - 如何计算列表中的总计

Question

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

订单详细信息.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>

我尝试过使用按类名获取元素，但仍然不起作用。

Answer 1

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

您不应该尝试从您的 View 中获取数据；它已经在你的 View 模型中了!

This documentation page告诉我您可以通过调用 items 方法从 DataSource 实例获取项目数组。

根据数据源的 map 函数和 text: Amount 数据绑定(bind)，我认为每个项目可能都有一个 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;
});