使用JsViews进行汇总值计算 [英] Summary Value Calculation with JsViews

问题描述

我喜欢使用jsviews绑定在页面上显示两个摘要数据.用户界面将类似于屏幕截图中的内容.

用户可以从列表中添加/删除此人，这将影响人数"的值，并且用户可以在文本框中编辑整数值，并且总值将显示在总计"中./p>

是的.我设法使其正常工作..请在此处查看我的代码. http://jsfiddle.net/michaelsync/eqhkzv3t/3/

但是我认为这非常丑陋，尤其是下面的代码.

function observeAmounts(){    
  people.forEach(function (person){
    $.observe(person, 'amount', function(e) {
        var amount =0;
        people.forEach(function(person){
            amount += parseInt(person.amount);
        });
        $('#output2').html('Total Amount: ' + amount);
    });
   });
}

 observeAmounts();

$.observe(people, function(e) {
    var l = $.map(people, function(n, i) { return i; }).length;
    $('#output1').html('Total No. of People: ' + l);
     observeAmounts();
});

嗯，我仍在阅读jsviews的教程和源代码/测试.但是对于JsViews而言，我几乎是个新闻.在我当前的代码中，我继续循环遍历数组以计算总数和人数.我认为我也许可以注册一个帮助器类，但仍然必须循环"people"数组以计算值.

因此，我相信JsViews中可能会有更好的方法.当JsViews网站引用我们在此处发布问题，并且JsViews的作者也在此处时，我决定将其发布在此处，以获取进行这些摘要数据方面的进展. (是的，您还可以在 http://jsfiddle.net/michaelsync/eqhkzv3t/3/)

任何建议将不胜感激.谢谢！

解决方案

我在这里创建了jsfiddle的更新版本: http://jsfiddle.net/BorisMoore/wch601L9/

您错过的主要帮助是使用observeAll:

http://www.jsviews.com/#observeAll

$.observable(people).observeAll(totalAmount);

我还为其他事情添加了两种不同的方法:

声明性事件绑定:

<td><button data-link="{on ~remove}">Remove</button></td>

顶级数据链接以显示数组的长度:

<span id="getLength" data-link="length"></span>

和

$("#getLength").link(true, people);

(另请参见以下示例: http://www.jsviews.com/#样本/可编辑/用于顶层，用于顶层数据链接)

I like to display two summary data on my page by using jsviews binding. The UI will be something like in screenshots.

The user can add/remove the person from the list and it will affect the value of "No. Of People" and the user can edit integer value in textbox and the total values will be shown in "Total Amount."

Yes. I managed to make it work .. Please see my code there. http://jsfiddle.net/michaelsync/eqhkzv3t/3/

But I think it's very ugly esp: this code below.

function observeAmounts(){    
  people.forEach(function (person){
    $.observe(person, 'amount', function(e) {
        var amount =0;
        people.forEach(function(person){
            amount += parseInt(person.amount);
        });
        $('#output2').html('Total Amount: ' + amount);
    });
   });
}

 observeAmounts();

$.observe(people, function(e) {
    var l = $.map(people, function(n, i) { return i; }).length;
    $('#output1').html('Total No. of People: ' + l);
     observeAmounts();
});

Well, I am still reading up the tutorials and the source code/test of jsviews. but I am pretty much news to JsViews. In my current code, I keep on looping up the array to calculate the total amount and the count of people. I think that I might be able to register a helper class but still have to loop the 'people' array to calculate the value.

So, I believe that there might be a better way in JsViews. As JsViews site refers us to post the questions here and the author of JsViews are also here, I decided to post it here to get an advance on doing those summary data. (Yes, you can also view my test code here http://jsfiddle.net/michaelsync/eqhkzv3t/3/ )

Any advice would be appreciated. Thanks!

解决方案

I created an updated version of your jsfiddle here: http://jsfiddle.net/BorisMoore/wch601L9/

The main thing you missed that will help is to use observeAll:

http://www.jsviews.com/#observeAll

$.observable(people).observeAll(totalAmount);

I also added a couple of different approaches for other things:

Declarative event bindings:

<td><button data-link="{on ~remove}">Remove</button></td>

Top-level data-linking to show the length of the array:

<span id="getLength" data-link="length"></span>

and

$("#getLength").link(true, people);

(See also this sample: http://www.jsviews.com/#samples/editable/toplevel-for, for top-level data-linking)

这篇关于使用JsViews进行汇总值计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！