PageRenderTime 50ms CodeModel.GetById 18ms RepoModel.GetById 0ms app.codeStats 0ms

/src/js/backbone.example.js

https://bitbucket.org/Tomithy/phyloviz
JavaScript | 109 lines | 82 code | 27 blank | 0 comment | 0 complexity | f05d2049739c211f72d509f0d0c922ab MD5 | raw file
  1. (function($) {
  2. Backbone.sync = function(method, model, success, error){
  3. success();
  4. }
  5. var Item = Backbone.Model.extend({
  6. defaults: {
  7. part1: 'hello',
  8. part2: 'world'
  9. }
  10. });
  11. var List = Backbone.Collection.extend({
  12. model:Item
  13. });
  14. var ItemView = Backbone.View.extend({
  15. tagName: "li",
  16. initialize : function (){
  17. _.bindAll(this, "render", "unrender", "swap", "remove");
  18. this.model.bind("change", this.render);
  19. this.model.bind("remove", this.unrender);
  20. },
  21. events: {
  22. "click span.swap" : "swap",
  23. "click span.delete": "remove"
  24. },
  25. render: function(){
  26. $(this.el).html("<span style='color:black;'>" + this.model.get("part1") + " " + this.model.get("part2") +
  27. '</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]' +
  28. "</span>");
  29. return this;
  30. },
  31. unrender: function(){
  32. $(this.el).remove();
  33. },
  34. swap: function(){
  35. var swapped = {
  36. part1: this.model.get("part2"),
  37. part2: this.model.get("part1")
  38. };
  39. this.model.set(swapped);
  40. },
  41. remove: function(){
  42. this.model.destroy();
  43. }
  44. });
  45. var ListView = Backbone.View.extend({
  46. el: $("body"),
  47. events: {
  48. 'click button#add': 'addItem'
  49. },
  50. initialize: function (){
  51. _.bindAll(this, "render", "addItem");
  52. this.collection = new List();
  53. this.collection.bind("add", this.appendItem);
  54. this.counter = 0;
  55. this.render();
  56. },
  57. render: function(){
  58. var self = this;
  59. $(this.el).append("<button id='add'>Add list item</button>");
  60. $(this.el).append("<ul></ul>");
  61. _(this.collection.models).each( function(item) {
  62. self.appendItem(item);
  63. }, this);
  64. },
  65. addItem: function(){
  66. this.counter++;
  67. var item = new Item();
  68. item.set({
  69. part2: item.get('part2') + this.counter
  70. });
  71. this.collection.add(item);
  72. },
  73. appendItem: function(item){
  74. var itemView = new ItemView({
  75. model: item
  76. });
  77. console.log(itemView.render().el);
  78. $("ul", this.el).append(itemView.render().el)
  79. }
  80. });
  81. var listView = new ListView();
  82. })(jQuery);