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

anybody from the backbone.js community want to give it a shot please. would really appreciate it. — aa_memon, Mar 22 '11 at 00:24

score 21 · Answer 1 · answered Sep 14 '11 at 19:55

21

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

answered Sep 14 '11 at 19:55

Misko Hevery

47,936
11
40
36

score 4 · Accepted Answer · answered Mar 07 '11 at 18:44

4

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.

answered Mar 07 '11 at 18:44

neebz

11,465
7
47
64

that was fast, thank you. i didn't mention that because the angular example made sense to me (a truly novice programmer) i can compare the frameworks and pick one to start with. thanks again – aa_memon Mar 07 '11 at 19:59
one area in which knockout really loose backbone or angular is validation and in your example you also doesn't have it. – sha1dy May 12 '11 at 12:44
that's true. I usually use jQuery validate plugin for validation along with knockoutjs. – neebz May 12 '11 at 15:21
fiddle fails to load (in Chrome:"ko is not defined") and IMHO knockout is far too verbose – Qrilka Nov 13 '11 at 17:48
2

@nEEbz you should seriously try angular.. The structure and terseness of the code is really evident.. – ganaraj May 30 '12 at 19:48
:( tutorial on jsfiddle is broken – Chase Florell Jan 28 '13 at 19:01
is it fixed under a different fiddle? Cuz the one you've got posted still throws an error. – Chase Florell Jan 28 '13 at 22:18
@ChaseFlorell : apparently jsfiddle forked it out > http://jsfiddle.net/neebz/YbwzJ/46/ – neebz Jan 29 '13 at 06:59

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

2 Answers2

Linked