AngularJS example in backbone.js and/or knockout.js

Question

I'm comparing these frameworks to do some calculations on the client side. I really liked the example on the AngularJS site. I was wondering if any of the backbone.js or knockout.js experts on the site would please recreate that example in their respective frameworks.

Here is the JSFiddle for it.

Code of the Fiddle:

<table ng:init="invoice= {items:[{qty:10, description:'gadget', cost:9.95}]}">
  <tr>
    <th>Qty</th>
    <th>Description</th>
    <th>Cost</th>
    <th>Total</th>
    <th></th>
  </tr>
  <tr ng:repeat="item in invoice.items">
    <td><input name="item.qty" value="1" size="4" ng:required ng:validate="integer"></td>
    <td><input name="item.description"></td>
    <td><input name="item.cost" value="0.00" ng:required ng:validate="number" size="6"></td>
    <td>{{item.qty * item.cost | currency}}</td>
    <td>[<a href ng:click="invoice.items.$remove(item)">X</a>]</td>
  </tr>
  <tr>
    <td><a href ng:click="invoice.items.$add()">add item</a></td>
    <td></td>
    <th>Total:</th>
    <td>{{invoice.items.$sum('qty*cost') | currency}}</td>
  </tr>
</table>

<!-- 
  Workaround for jsfiddle to pass in ng:autobind
  http://doc.jsfiddle.net/basic/introduction.html#css
-->
<script src="http://code.angularjs.org/angular-0.9.10.min.js" ng:autobind></script>

<style>
table th {
  font-weight: bold;
}
table td {
  padding: 0.3em;
}

Answer 1

Here you go for knockoutjs >

http://jsfiddle.net/neebz/YbwzJ/

I might be biased but it's a lot more structural than angular/backbone.

If you have any questions, let me know.

There are some NaN checks which I think you could take yourself.

Answer 2

Also have a look https://github.com/addyosmani/todomvc which show a standard TODO app written in all popular frameworks.