PageRenderTime 52ms CodeModel.GetById 23ms RepoModel.GetById 0ms app.codeStats 1ms

/scripts.js

https://gitlab.com/adiclepcea/testbb
JavaScript | 154 lines | 140 code | 12 blank | 2 comment | 3 complexity | 8a8d2a5e3624ed2778b22c0386f49512 MD5 | raw file
  1. Backbone.Model.prototype.idAttribute = "id";
  2. var app = app || {};
  3. app.Blog = Backbone.Model.extend({
  4. defaults: {
  5. author: "",
  6. title: "",
  7. url: "http://localhost:3000/api/blogs"
  8. }
  9. });
  10. app.Blogs = Backbone.Collection.extend({
  11. url:"http://localhost:3000/api/blogs"
  12. });
  13. blog1 = new app.Blog({
  14. author: "Adi",
  15. title: "Adi's Blog",
  16. url: "http://adisblog.com"
  17. });
  18. blog2 = new app.Blog({
  19. author: "Roli",
  20. title: "Roli's Blog",
  21. url: "http://rolisblog.com"
  22. });
  23. //blogs = new app.Blogs([blog1, blog2]);
  24. blogs = new app.Blogs();
  25. app.BlogView = Backbone.View.extend({
  26. model: new app.Blog(),
  27. tagName: "tr",
  28. initialize: function(){
  29. this.template = _.template($("#blogs-list-template").html());
  30. },
  31. events:{
  32. 'click .edit-blog':"edit",
  33. 'click .cancel-blog':"cancel",
  34. 'click .update-blog':"update",
  35. 'click .delete-blog':"delete"
  36. },
  37. edit: function(){
  38. $(".edit-blog").hide();
  39. $(".delete-blog").hide();
  40. this.$(".update-blog").show();
  41. this.$(".cancel-blog").show();
  42. var author = this.$(".author").html();
  43. var title = this.$(".title").html();
  44. var url = this.$(".url").html();
  45. this.$(".author").html('<input type="text" class="form-control" id="author-update" value="'+author+'"/>');
  46. this.$(".title").html('<input type="text" class="form-control" id="title-update" value="'+title+'"/>');
  47. this.$(".url").html("<input type='text' class='form-control' id='url-update' value='"+url+"'/>");
  48. },
  49. cancel: function(){
  50. $(".edit-blog").show();
  51. $(".delete-blog").show();
  52. this.render();
  53. },
  54. delete: function(){
  55. if(confirm("Are you sure you want to delete "+this.model.get("title")+"?")){
  56. this.model.destroy({
  57. success: function(response){
  58. console.log("deleted "+response.responseText);
  59. },
  60. error: function(){
  61. console.log("failed delete");
  62. }
  63. });
  64. }
  65. },
  66. update: function(){
  67. blogs.remove(this.model);
  68. blogs.add(new app.Blog({
  69. "author":this.$("#author-update").val(),
  70. "title":this.$("#title-update").val(),
  71. "url":this.$("#url-update").val()
  72. }));
  73. this.$(".author").val("");
  74. this.$(".title-input").val("");
  75. this.$(".url-input").val("");
  76. this.model.save(null,{
  77. success: function(response){
  78. console.log("OK");
  79. },
  80. error:function(response){
  81. console.log("NOK");
  82. }
  83. });
  84. },
  85. render: function(){
  86. console.log(this.model.toJSON());
  87. this.$el.html(this.template(this.model.toJSON()));
  88. return this;
  89. }
  90. });
  91. app.BlogsView = Backbone.View.extend({
  92. model: blogs,
  93. el: $("#blogs-list"),
  94. initialize: function(){
  95. this.model.on('add remove', this.render,this);
  96. if(this.model.length>0){
  97. this.render();
  98. }
  99. this.model.fetch({
  100. success: function(response){
  101. _.each(response.toJSON(), function(item){
  102. console.log(item);
  103. })
  104. },
  105. error: function(){
  106. console.log("failed");
  107. }
  108. });
  109. return this;
  110. },
  111. render: function(){
  112. var self=this;
  113. this.$el.html("");
  114. _.each(this.model.toArray(), function(blog){
  115. self.$el.append((new app.BlogView({model:blog})).render().$el);
  116. });
  117. return this;
  118. }
  119. });
  120. var blogsView = new app.BlogsView();
  121. $().ready(function(){
  122. $(".add-blog").on('click',function(){
  123. var blog = new app.Blog({
  124. author: $(".author-input").val(),
  125. title: $(".title-input").val(),
  126. url: $(".url-input").val()
  127. });
  128. $(".author-input").val("");
  129. $(".title-input").val("");
  130. $(".url-input").val("");
  131. //console.log(blog.toJSON());
  132. blogs.add(blog);
  133. blog.save(null,{
  134. success: function(response){
  135. console.log("Saved");
  136. },
  137. error: function(err){
  138. console.log("failed to save:"+err.toJSON());
  139. }
  140. });
  141. })
  142. });