如何使用breeze.js扩展实体在网格中计算总数? [英] How to calculate a total in a grid with breeze.js extended entities?

问题描述

我正在使用MVVM模式，breeze.js和knockout.js开发MVC Web应用程序.这是我第一次使用这些js库，但我仍然必须掌握它们的工作方式.

I am working on an MVC web application using the MVVM pattern, breeze.js and knockout.js. This is the first time I use these js libraries and I still have to grasp how they work.

应用程序的页面之一具有网格，在该网格中动态生成列和行.我需要添加一列，其中每一行的总值显示在以下行单元格中.这里是一个例子:

One of the pages of the application has a grid where both columns and rows are generated dynamically. I need to add an additional column where for each row I have the total of values displayed in the following row cells. Here an example:

Data type |   Comment   |  Fact 1 | Fact 2 |  Total    | Value 1 | Value 2 | Value 3 | Value 4
==============================================================================================
Item 1    | any comment |  fact 1 | fact 2 | calc. sum |    10   |   20    |    30   |   40

通过将微风实体对象(planningItems)绑定到模板来生成网格.该对象具有DataTypeId，Comment，Member，Total，FactValues属性.总计是计算得出的总和.

The grid is generated by binding a breeze entity object (planningItems) to templates. The object has the properties DataTypeId, Comment, Member, Total, FactValues. Total is the calculated sum.

<script type="text/html" id="list-planning-template">
<tr data-bind="mouseOverButton: $data">
    <td style="text-align: center">
        <button class="actionbutton actionbutton-item" data-bind="selectItem: $root.selectedItems, itemId: FactId"></button>
    </td>
    <td data-bind="text: DataTypeId" />
    <td data-bind="text: Comment().Text" />
    <!-- ko foreach: FactMembers -->
    <td data-bind="text: Member().Code"></td>
    <!-- /ko -->
    <td data-bind="text: Total" />
    <!-- ko foreach: FactValues -->
    <td style="width: 50px" data-bind="text: Value"></td>
    <!-- /ko -->
</tr>

我一直试图通过以下方式扩展微风实体对象来添加Total属性:

I have been trying to add the Total property by extending the breeze entity object in the following way:

var FactCtor = function () {
this.Total = ko.computed({
    read: function () {
        var sum = 0;
        if (this.FactValues) {
            this.FactValues().forEach(function (fv) {
                sum += fv.Value();
            });
        }
        return sum;
    },
    deferEvaluation: true
}, this);
};

manager.metadataStore.registerEntityTypeCtor("Fact", FactCtor);

本质上，这段代码应该做的是通过添加具有递延评估的敲除计算得出的可观察到的名为Total的实体来扩展实体.该函数遍历微风可观察数组FactValues并添加值.我一直在想这些代码的不同版本，但无济于事.谁能给我提示这段代码有什么问题吗?

Essentially, what this code is supposed to do is to extend the entity by adding a knockout computed observable named Total with deferred evaluation. The function iterates through the breeze observable array FactValues and adds the values. I have been mucking about different versions of this code to no avail. Can anyone give me a hint on what is wrong with this code?

推荐答案

更新:

我们无法使我以前的文章中发布的代码正常工作.通过使用微风的自定义绑定，我们最终能够克服此问题.这是代码:

We were not able to get the code posted in my previous post to work. We were eventually able to overcome the problem by using a custom binding with breeze. Here is the code:

   ko.bindingHandlers.getFyTotal = {
   update: function (element, valueAccessor) {
       var sum = 0;
       var fact = valueAccessor();
       if (fact.FactValues()) {
           fact.FactValues().forEach(function (fv) {
               sum += parseFloat(fv.Value());
           });
       }

       $(element).html(sum);
   }
};

然后通过以下方式在HTML代码中引用自定义绑定:

The custom binding is then referenced in the HTML code the following way:

<td data-bind="getFyTotal: $data" />

希望这对其他人有帮助.

Hope this may help others.

修订版本:

我们已经更新了上面的代码，以利用ko.utils函数:

We have updated the above code to take advantage of ko.utils functions:

ko.bindingHandlers.getFyTotal = {
update: function (element, valueAccessor) {
    var sum = 0;
    var fact = valueAccessor();
    if (fact.FactValues()) {
        ko.utils.arrayForEach(fact.FactValues(), function (fv) {
            sum += parseFloat(fv.Value());
        });
    }

    $(element).html(sum);
  }
};

这篇关于如何使用breeze.js扩展实体在网格中计算总数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！