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
– aa_memon, Commented Mar 22, 2011 at 0:24

Misko Hevery · Accepted Answer · 2011-09-14 19:55:33Z

21

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

answered Sep 14, 2011 at 19:55

Misko Hevery

47.9k11 gold badges43 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

neeebzz · Accepted Answer · 2011-03-07 18:44:41Z

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 7, 2011 at 18:44

neeebzz

11.5k7 gold badges50 silver badges65 bronze badges

8 Comments

aa_memon Over a year ago

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

sha1dy Over a year ago

one area in which knockout really loose backbone or angular is validation and in your example you also doesn't have it.

neeebzz Over a year ago

that's true. I usually use jQuery validate plugin for validation along with knockoutjs.

Qrilka Over a year ago

fiddle fails to load (in Chrome:"ko is not defined") and IMHO knockout is far too verbose

Ganaraj Over a year ago

@nEEbz you should seriously try angular.. The structure and terseness of the code is really evident..

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related