PageRenderTime 66ms CodeModel.GetById 31ms RepoModel.GetById 0ms app.codeStats 0ms

/webservice/tutorial/part2/js/main.js

https://bitbucket.org/biotelligent/winecellar
JavaScript | 181 lines | 139 code | 35 blank | 7 comment | 4 complexity | 245245e726930d784cbec33bf164fcda MD5 | raw file
Possible License(s): Apache-2.0
  1. // Models
  2. window.Wine = Backbone.Model.extend({
  3. urlRoot:"../api/wines",
  4. defaults:{
  5. "id":null,
  6. "name":"",
  7. "grapes":"",
  8. "country":"USA",
  9. "region":"California",
  10. "year":"",
  11. "description":"",
  12. "picture":""
  13. }
  14. });
  15. window.WineCollection = Backbone.Collection.extend({
  16. model:Wine,
  17. url:"../api/wines"
  18. });
  19. // Views
  20. window.WineListView = Backbone.View.extend({
  21. tagName:'ul',
  22. initialize:function () {
  23. this.model.bind("reset", this.render, this);
  24. var self = this;
  25. this.model.bind("add", function (wine) {
  26. $(self.el).append(new WineListItemView({model:wine}).render().el);
  27. });
  28. },
  29. render:function (eventName) {
  30. _.each(this.model.models, function (wine) {
  31. $(this.el).append(new WineListItemView({model:wine}).render().el);
  32. }, this);
  33. return this;
  34. }
  35. });
  36. window.WineListItemView = Backbone.View.extend({
  37. tagName:"li",
  38. template:_.template($('#tpl-wine-list-item').html()),
  39. initialize:function () {
  40. this.model.bind("change", this.render, this);
  41. this.model.bind("destroy", this.close, this);
  42. },
  43. render:function (eventName) {
  44. $(this.el).html(this.template(this.model.toJSON()));
  45. return this;
  46. },
  47. close:function () {
  48. $(this.el).unbind();
  49. $(this.el).remove();
  50. }
  51. });
  52. window.WineView = Backbone.View.extend({
  53. template:_.template($('#tpl-wine-details').html()),
  54. initialize:function () {
  55. this.model.bind("change", this.render, this);
  56. },
  57. render:function (eventName) {
  58. $(this.el).html(this.template(this.model.toJSON()));
  59. return this;
  60. },
  61. events:{
  62. "change input":"change",
  63. "click .save":"saveWine",
  64. "click .delete":"deleteWine"
  65. },
  66. change:function (event) {
  67. var target = event.target;
  68. console.log('changing ' + target.id + ' from: ' + target.defaultValue + ' to: ' + target.value);
  69. // You could change your model on the spot, like this:
  70. // var change = {};
  71. // change[target.name] = target.value;
  72. // this.model.set(change);
  73. },
  74. saveWine:function () {
  75. this.model.set({
  76. name:$('#name').val(),
  77. grapes:$('#grapes').val(),
  78. country:$('#country').val(),
  79. region:$('#region').val(),
  80. year:$('#year').val(),
  81. description:$('#description').val()
  82. });
  83. if (this.model.isNew()) {
  84. app.wineList.create(this.model);
  85. } else {
  86. this.model.save();
  87. }
  88. return false;
  89. },
  90. deleteWine:function () {
  91. this.model.destroy({
  92. success:function () {
  93. alert('Wine deleted successfully');
  94. window.history.back();
  95. }
  96. });
  97. return false;
  98. },
  99. close:function () {
  100. $(this.el).unbind();
  101. $(this.el).empty();
  102. }
  103. });
  104. window.HeaderView = Backbone.View.extend({
  105. template:_.template($('#tpl-header').html()),
  106. initialize:function () {
  107. this.render();
  108. },
  109. render:function (eventName) {
  110. $(this.el).html(this.template());
  111. return this;
  112. },
  113. events:{
  114. "click .new":"newWine"
  115. },
  116. newWine:function (event) {
  117. if (app.wineView) app.wineView.close();
  118. app.wineView = new WineView({model:new Wine()});
  119. $('#content').html(app.wineView.render().el);
  120. return false;
  121. }
  122. });
  123. // Router
  124. var AppRouter = Backbone.Router.extend({
  125. routes:{
  126. "":"list",
  127. "wines/:id":"wineDetails"
  128. },
  129. initialize:function () {
  130. $('#header').html(new HeaderView().render().el);
  131. },
  132. list:function () {
  133. this.wineList = new WineCollection();
  134. this.wineListView = new WineListView({model:this.wineList});
  135. this.wineList.fetch();
  136. $('#sidebar').html(this.wineListView.render().el);
  137. },
  138. wineDetails:function (id) {
  139. this.wine = this.wineList.get(id);
  140. if (app.wineView) app.wineView.close();
  141. this.wineView = new WineView({model:this.wine});
  142. $('#content').html(this.wineView.render().el);
  143. }
  144. });
  145. var app = new AppRouter();
  146. Backbone.history.start();