使用JsViews计算汇总值

时间:2014-09-08 09:33:09

标签: javascript jquery-templates jsrender jsviews

我喜欢使用jsviews绑定在我的页面上显示两个摘要数据。用户界面就像截图一样。

enter image description here

用户可以在列表中添加/删除此人,它将影响“人数”的值,用户可以在文本框中编辑整数值,总值将显示在“总金额”中。 / p>

是。我设法让它工作..请在那里看到我的代码。 http://jsfiddle.net/michaelsync/eqhkzv3t/3/

但我认为这是非常丑陋的esp:下面的代码。

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/

任何建议都将不胜感激。谢谢!

1 个答案:

答案 0 :(得分: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,用于顶级数据链接)