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;
}
Also have a look https://github.com/addyosmani/todomvc which show a standard TODO app written in all popular frameworks.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With