CODEWITHSUNDEEP
angularjsbackbone.jsknockout.jsjavascript-framework
aa_memon
aa_memon

Reputation: 141

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

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;
}

Upvotes: 9

Views: 8031

Answers (2)

Misko Hevery
Misko Hevery

Reputation: 47946

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

Upvotes: 21

neeebzz
neeebzz

Reputation: 11538

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.

Upvotes: 4

Related Questions