Commit 3a09777d2a4be65bf3fa6a56bfad8402b2a19152
Feature completion. Authenticate to sweet store, and get all previous
comments from sweet store.
Reply to a comment is not completely functional yet. POST to sweet
store is failing.
- app.js 129 ---------------++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
| | | | 4 | // C.CommentView = CommentView; //Expose the API to window. | 4 | // C.CommentView = CommentView; //Expose the API to window. |
---|
5 | // C.Comment = Comment; | 5 | // C.Comment = Comment; |
---|
6 | /* Create a empty model and view */ | 6 | /* Create a empty model and view */ |
---|
7 | var cv = new CommentView({model: new Comment()}); | | var cv = new CommentView({model: new Comment()}); |
---|
| | 7 | C.comments = new Comments(); | | | 8 | C.cv = new PostedCommentView({collection: C.comments}); |
---|
| | 9 | new CommentView({model: new Comment()}); |
---|
8 | }; | 10 | }; |
---|
9 | var Comment = Backbone.Model.extend({ | 11 | var Comment = Backbone.Model.extend({ |
---|
10 | /* A model representing a comment. */ | 12 | /* A model representing a comment. */ |
---|
11 | defaults:{ | | defaults:{ |
---|
12 | what:C.config.what, | | what:C.config.what, |
---|
13 | where: window.location.href | | where: window.location.href |
---|
| | 13 | defaults: function(){ | | | 14 | return { |
---|
| | 15 | what: C.what, |
---|
| | 16 | where: window.location.href, |
---|
| | 17 | how:{ |
---|
| | 18 | comment:'' |
---|
| | 19 | } |
---|
| | 20 | }; |
---|
14 | }, | 21 | }, |
---|
15 | url: "http://127.0.0.1:5001/sweets", | 22 | url: "http://127.0.0.1:5001/sweets", |
---|
16 | initialize: function(){ | 23 | initialize: function(){ |
---|
| | 24 | this.set({"what": C.what}); |
---|
| | 25 | } |
---|
| | 26 | }); |
---|
17 | | 27 | |
---|
| | 28 | var Comments = Backbone.Collection.extend({ |
---|
| | 29 | model: Comment, |
---|
| | 30 | url: C.url + C.sweet, |
---|
| | 31 | initialize: function(){ |
---|
| | 32 | this.getAll({ |
---|
| | 33 | "what":C.what, |
---|
| | 34 | "success": function(data){ |
---|
| | 35 | C.comments.add(data); |
---|
| | 36 | |
---|
| | 37 | } |
---|
| | 38 | }); |
---|
| | 39 | }, |
---|
| | 40 | getAll: function(options){ |
---|
| | 41 | /* Get the previous comments */ |
---|
| | 42 | if(!options.what) { |
---|
| | 43 | throw Error('"what" option must be passed to get sweets of a URI'); |
---|
| | 44 | return false; |
---|
| | 45 | } |
---|
| | 46 | // setting up params |
---|
| | 47 | var what = options.what, |
---|
| | 48 | who = options.who || null; |
---|
| | 49 | url = C.url + C.get + '?what=' + what; |
---|
| | 50 | if(who) { |
---|
| | 51 | url += '&who=' + who; |
---|
| | 52 | } |
---|
| | 53 | // get them! |
---|
| | 54 | this.sync('read', this, { |
---|
| | 55 | url: url, |
---|
| | 56 | success: function() { |
---|
| | 57 | if(typeof options.success === 'function') { |
---|
| | 58 | options.success.apply(this, arguments); |
---|
| | 59 | } |
---|
| | 60 | }, |
---|
| | 61 | error: function() { |
---|
| | 62 | if(typeof options.error === 'function') { |
---|
| | 63 | options.error.apply(this, arguments); |
---|
| | 64 | } |
---|
| | 65 | } |
---|
| | 66 | }); |
---|
18 | } | 67 | } |
---|
| | 68 | |
---|
19 | }); | 69 | }); |
---|
20 | | 70 | |
---|
21 | var CommentView = Backbone.View.extend({ | 71 | var CommentView = Backbone.View.extend({ |
---|
… | | … | |
---|
77 | initialize: function(){ | 77 | initialize: function(){ |
---|
78 | // _.bindAll.apply(_, [this].concat(_.functions(this))); | 78 | // _.bindAll.apply(_, [this].concat(_.functions(this))); |
---|
79 | // _.bind(this.render, this); | 79 | // _.bind(this.render, this); |
---|
80 | // this.listenTo(this.model, "change", this.render); | | // this.listenTo(this.model, "change", this.render); |
---|
| | 80 | // this.listenTo(this.model, "change", this.render); | 81 | this.render(); | 81 | this.render(); |
---|
82 | }, | 82 | }, |
---|
83 | | 83 | |
---|
84 | render: function(el){ | 84 | render: function(el){ |
---|
85 | $(this.el).append(this.template()); | | $(this.el).append(this.template()); |
---|
| | 85 | $(this.el).append(this.template(this.model.toJSON())); | 86 | }, | 86 | }, |
---|
87 | | 87 | |
---|
88 | save: function(){ | | save: function(){ |
---|
| | 88 | save: function(e){ | 89 | /* Create a sweet and send it to the sweet store. | 89 | /* Create a sweet and send it to the sweet store. |
---|
90 | Update the view to include the comment */ | 90 | Update the view to include the comment */ |
---|
91 | this.model.set({"how":{"comment":$("textarea.form-control").val()}}); | | this.model.set({"how":{"comment":$("textarea.form-control").val()}}); |
---|
| | 91 | this.model.set({how:{comment:this.$("textarea.form-control").val(), | | | 92 | replyTo:this.model.get('how')['replyTo']}}); |
---|
92 | this.model.set({created: new Date().toUTCString().substr(0, 25)}); | 93 | this.model.set({created: new Date().toUTCString().substr(0, 25)}); |
---|
93 | this.model.save(null,{success:function(model){ | | this.model.save(null,{success:function(model){ |
---|
94 | new PostedCommentView({model:new | | new PostedCommentView({model:new |
---|
95 | Comment(_.clone(model.attributes)[0])}); | | Comment(_.clone(model.attributes)[0])}); |
---|
96 | $("textarea.form-control").val(""); //Reset the view to have no content. | | $("textarea.form-control").val(""); //Reset the view to have no content. |
---|
97 | }}); | | }}); |
---|
| | 94 | new LoginView({model:this.model}); | 98 | | 95 | |
---|
99 | } | 96 | } |
---|
100 | }); | 97 | }); |
---|
101 | | 98 | |
---|
102 | var PostedCommentView = Backbone.View.extend({ | 99 | var PostedCommentView = Backbone.View.extend({ |
---|
103 | el: "#commented", | 100 | el: "#commented", |
---|
| | 101 | events: { |
---|
| | 102 | "click button": "reply" |
---|
| | 103 | }, |
---|
104 | template: _.template($("#commented-template").html()), | 104 | template: _.template($("#commented-template").html()), |
---|
105 | initialize: function(){ | 105 | initialize: function(){ |
---|
| | 106 | this.listenTo(this.collection, "add", this.render); |
---|
106 | this.render(); | 107 | this.render(); |
---|
107 | }, | 108 | }, |
---|
108 | render: function(el){ | 109 | render: function(el){ |
---|
109 | content = this.model.toJSON()["how"]["comment"]; | | content = this.model.toJSON()["how"]["comment"]; |
---|
110 | $(this.el).append(this.template({content:content})); | | $(this.el).append(this.template({content:content})); |
---|
| | 110 | _.each(this.collection.models, function(comment){ | | | 111 | t = _.template($("#commented-template").html()); |
---|
| | 112 | $("#commented").append(t(comment.toJSON())); |
---|
| | 113 | //comment.get("how").comment); |
---|
| | 114 | }); |
---|
| | 115 | |
---|
| | 116 | // content = this.model.toJSON()["how"]["comment"]; |
---|
| | 117 | // $(this.el).append(this.template({content:content})); |
---|
| | 118 | }, |
---|
| | 119 | reply: function(e){ |
---|
| | 120 | var rep = new Comment({how:{replyTo:$(e.currentTarget).attr('for')}}); |
---|
| | 121 | $(e.currentTarget).parent().after("<div class='comment-reply'></div>"); |
---|
| | 122 | el = $("#commented .comment-reply"); |
---|
| | 123 | new CommentView({model: rep, el:el }); |
---|
111 | } | 124 | } |
---|
112 | | 125 | |
---|
113 | }); | 126 | }); |
---|
| | 127 | var LoginView = Backbone.View.extend({ |
---|
| | 128 | el: ".modal", |
---|
| | 129 | events:{ |
---|
| | 130 | "click #saveButton": "login" |
---|
| | 131 | }, |
---|
| | 132 | initialize: function(){ |
---|
| | 133 | this.render(); |
---|
| | 134 | }, |
---|
| | 135 | render: function(){ |
---|
| | 136 | $(this.el).modal(); |
---|
| | 137 | }, |
---|
| | 138 | login: function(model){ |
---|
| | 139 | var username = $("#username").val(); |
---|
| | 140 | var password = $("#password").val(); |
---|
| | 141 | |
---|
| | 142 | $.ajax({ |
---|
| | 143 | url: "http://127.0.0.1:5001/authenticate", |
---|
| | 144 | type: 'POST', |
---|
| | 145 | data: {user: username, hash: password}, |
---|
| | 146 | context: this.model, |
---|
| | 147 | success: function(data) { |
---|
| | 148 | this.set({"who":username}); |
---|
| | 149 | $(".modal").modal('toggle'); |
---|
| | 150 | this.save(null,{success:function(model){ |
---|
| | 151 | C.comments.add(model); |
---|
| | 152 | $("textarea.form-control").val(""); //Reset the view to have no content. |
---|
| | 153 | } |
---|
| | 154 | }); |
---|
| | 155 | |
---|
| | 156 | }}).then(function(){ |
---|
| | 157 | |
---|
| | 158 | }); |
---|
| | 159 | |
---|
| | 160 | } |
---|
| | 161 | }); |
---|
| | 162 | |
---|
114 | })(C); | 163 | })(C); |
---|