Question

我有一个购物车（http://beta.jcantiques.com/Home/Cart）您需要在“产品”页面中添加项目。

我无法让SUM CBM字段正常工作。

以下是代码：

JS

    <script>
    $(document).ready(function () {
    var CartLine = function () {
            var self = this;
            self.UniqueItemCode = ko.observable();
            self.ItemCode = ko.observable();
            self.Description = ko.observable();
            self.SizeInCm = ko.observable();
            self.CmCBM = ko.observable();
            self.Wood = ko.observable();
            self.Quantity = ko.observable();
            self.subtotalCBM = ko.computed(function () {
                return (parseFloat(self.CmCBM) * parseFloat(self.Quantity));
            });
        };

        var Cart = function () {
            var self = this;
            self.lines = ko.mapping.fromJS([]);
            //Converting C# data into JS array
            var orderItems = JSON.parse('@Html.Raw(Json.Encode(Model))');
            console.log(orderItems);

            // Mapping JS array to KO array
            ko.mapping.fromJS(orderItems, {}, self.lines);

            self.grandTotalCBM = ko.computed(function () {
                var total = 0;
                $.each(self.lines(), function () { total += this.subtotalCBM(); })
                return total;
            });

            self.totalQty = ko.computed(function () {
                var total = 0;
                $.each(self.lines(), function () { total += parseInt(this.Quantity()) })
                return total;
            });

        };
        ko.applyBindings(new Cart());
    });
    </script>

HTML

<tbody data-bind="foreach: lines">
                            <tr>
                                <td><a href="#" class="icon-close remove-item" data-bind="click: $parent.removeLine"><span aria-hidden="true" class="icon_close"></span></a></td>
                                <td>
                                    <img style="width:70px; height:70px;" onerror="if (this.src != '/Content/Images/no_picture.gif') this.src = '/Content/Images/no_picture.gif';" data-bind="    attr: { 'src': '/Content/OPAMS_Images/' + ItemCode + '/' + ItemCode + '-Thumb.jpg' }" />
                                </td>
                                <td>
                                    <span data-bind="text: ItemCode"></span>
                                </td>
                                <td>
                                    <span data-bind="text: Description" style="max-width:200px;"></span>
                                </td>
                                <td>
                                    <span data-bind="text: SizeInCm"></span>
                                </td>
                                <td>
                                    <span data-bind="text: CmCBM"></span>
                                </td>
                                <td>
                                    <span data-bind="text: Wood"></span>
                                </td>
                                <td>
                                    <input data-bind='value: Quantity, valueUpdate: "afterkeydown"' style="width: 60px;" />
                                    <span class="hidden" data-bind="text: Quantity"></span>
                                </td>
                                <td>
                                    <span data-bind="text: subtotalCBM"></span>
                                </td>
                            </tr>
                        </tbody>

非常感谢任何帮助。

Answer 1

您需要调用 observable才能读取其值：

self.subtotalCBM = ko.computed(function () {
    return (parseFloat(self.CmCBM()) * parseFloat(self.Quantity()));
});

Answer 2

您没有使用您创建的CartLine模型来处理subtotalCBM的计算。

您正在使用ko.mapping插件，我不知道是否有简单的方法可以使用CartLine模型。但您可以使用create ko.mapping方法来自定义对象构造并在其上添加subtotalCBM。

像：

var mapping = {
  create: function(options) {
     var vm = ko.mapping.fromJS(options.data);

     vm.subtotalCBM = ko.computed(function () {
         return (parseFloat(vm.CmCBM()) * parseFloat(vm.Quantity()));
     });

     return vm;
  }
};

// Mapping JS array to KO array
ko.mapping.fromJS(orderItems, mapping, self.lines);

使用“创建”部分here查看自定义对象构建以获取更多信息。

KO计算字段不起作用

2 个答案: