使用 JsViews 计算汇总值答案

【问题标题】：Summary Value Calculation with JsViews使用 JsViews 计算汇总值
【发布时间】：2014-11-01 11:47:06
【问题描述】：

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

用户可以从列表中添加/删除人员，这将影响“人数”的值，用户可以在文本框中编辑整数值，总值将显示在“总金额”中。

是的。我设法使它工作..请在那里查看我的代码。 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 来说几乎是新闻。在我当前的代码中，我继续循环数组以计算总数和人数。我认为我可能能够注册一个辅助类，但仍然需要循环“人员”数组来计算值。

所以，我相信 JsViews 中可能有更好的方法。由于 JsViews 网站建议我们在此处发布问题，并且 JsViews 的作者也在此处，因此我决定将其发布在此处以提前进行这些汇总数据。（是的，你也可以在这里查看我的测试代码http://jsfiddle.net/michaelsync/eqhkzv3t/3/）

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

【问题讨论】：

对不起。由于某种原因，我的代码在 jsfiddle 中消失了。我将其添加回来。
我觉得应该是/3/..
顺便说一句，您也可以将版本 /3 设置为基础 - 这样您就可以稍后更新而不会破坏链接...
当然。谢谢你的提示。是的。我会这样做的..

标签： javascript jquery-templates jsrender jsviews

【解决方案1】：

我在这里创建了您的 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/#samples/editable/toplevel-for，用于顶级数据链接）

【讨论】：

太棒了！非常感谢！