Calculating total amount with JsViews

by BorisMoore

HTML

<script src="//www.jsviews.com/download/jsviews.js"></script>
<button id="add" >Add Person</button>

<br/>

<table><tbody id="peopleList"></tbody></table>

<script id="personTmpl" type="text/x-jsrender">
      <tr>
        <td>Name</td>
        <td data-link="name"></td>
        <td><input data-link="amount trigger=true" /></td>
        <td><button data-link="{on ~remove}">Remove</button></td>
      </tr>
</script>

<div>Total No. of People: <span id="getLength" data-link="length"></span></div>

<div id="output2">Total Amount: 0</div>

JavaScript

// http://stackoverflow.com/questions/25721180/summary-value-calculation-with-jsviews

var myTemplate = $.templates("#personTmpl");

var people = [
  {
    name: "Adriana",
    amount:  10
  },
  {
    name: "Robert",
    amount:  2
  }
];

myTemplate.link("#peopleList", people, {
    remove: function(ev, eventArgs) {
        $.observable(people).remove(eventArgs.view.index);
    }
});

$('#add').on("click",function() {
    $.observable(people).insert({
        name : 'f',
        amount : 41
    });
}
);

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

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

totalAmount();

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