Commit 04018d7bc0f7f83eb18463a5204ffe9128987354

  • avatar
  • arvind
  • Wed Mar 05 19:04:29 IST 2014
Nested models is a better way of representing of a comment model with
how attributes.
  • app.js 100 ------------------------------++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

app.js

1(function(C) {1(function(C) {
22
3 C.init = function() {3 C.init = function() {
4 // C.CommentView = CommentView; //Expose the API to window.
5 // C.Comment = Comment;
6 /* Create a empty model and view */4 /* Create a empty model and view */
7 C.comment = new Comment();
8 C.comments = new Comments();
9 C.cv = new CommentView({collection: C.comments});
10 C.comments.add(C.comment);
5 C.comment = new Comment({'how': new How()});
6 C.comments = new Sweets();
7 /* Create the app, the app sets up event handler for the Comments collection */
8 var App = new AppView;
9
10 C.comments.add(C.comment); //Add the empty model to the collection.
11
11 };12 };
13 var How = Backbone.Model.extend({
14 defaults: {
15 'comment':'',
16 'replyTo':''
17 },
18 initialize: function() {
19 }
20 });
12 var Comment = Backbone.Model.extend({21 var Comment = Backbone.Model.extend({
13 /* A model representing a comment. */22 /* A model representing a comment. */
23 url: function() {
24 return C.url + C.sweet;
25 },
14 defaults: function() {26 defaults: function() {
15 return {27 return {
16 'who':'',28 'who':'',
17 'what': C.what,
29 'what':C.what,
18 'where': window.location.href,30 'where': window.location.href,
19 'how':{
20 'comment':'',
21 'replyTo':''
22 }
31 'how': ''
23 };32 };
24 },33 },
25 url: "http://127.0.0.1:5001/sweets",
34
26 initialize: function() {35 initialize: function() {
27 this.set({"what": C.what});
36 },
37 toJSON: function() {
38 how = this.get('how').toJSON();
39 return this;
28 }40 }
29 });41 });
3042
31 var Comments = Backbone.Collection.extend({
43 var Sweets = Backbone.Collection.extend({
32 model: Comment,44 model: Comment,
33 url: C.url + C.sweet,45 url: C.url + C.sweet,
34 initialize: function() {46 initialize: function() {
……
8383
84 });84 });
8585
86 // var Sweets = Backbone.Collection.extend({
87 // model: Comment,
88 // url: C.url + C.get + '?what=' + C.what,
89 // initialize: function() {
90 // this.sync('read', this, {
91 // url: this.url
92 // });
93 // }
94 // });
86 var CommentView = Backbone.View.extend({95 var CommentView = Backbone.View.extend({
87 el: $("#comments"),
96 tagName: 'div',
88 template: _.template($("#commented-template").html()),97 template: _.template($("#commented-template").html()),
89 edit_template: _.template($("#comment-template").html()),98 edit_template: _.template($("#comment-template").html()),
90 events:{99 events:{
91 "click .save": "save",100 "click .save": "save",
92 "click .comment button": "reply"101 "click .comment button": "reply"
93 },102 },
94 initialize: function() {
95 this.listenTo(this.collection, "add", this.render);
96 },
103 intialize: function() {
104 this.listenTo(this.model, "save", this.render);
97105
98 render: function(model) {
99 console.log(model);
100 if(model.get('how')['comment'].length) {
101 $(this.el).append(this.template(model.toJSON()));
106 },
107 render: function() {
108 if(this.model.get('how').get('comment').length) {
109 if(this.model.get('how').get('replyTo').length) {
110 var item = '#' + this.model.get('how')['replyTo'];
111 var el = $(item).parent();
112 $(el).append(this.template(this.model.toJSON()));
113 }
114 else{
115 console.log(this.model.toJSON());
116 $(this.el).append(this.template(this.model.toJSON()));
117 }
102 }118 }
103 else {119 else {
104 $(this.el).append(this.edit_template(model.toJSON()));
120 $(this.el).append(this.edit_template(this.model.toJSON()));
105 }121 }
122 return this;
106123
107
108 },124 },
109125
110 save: function(e) {126 save: function(e) {
111 /* Create a sweet and send it to the sweet store.127 /* Create a sweet and send it to the sweet store.
112 Update the view to include the comment */128 Update the view to include the comment */
113 e.preventDefault();129 e.preventDefault();
114 this.model.set({'how':{'comment':this.$("textarea.form-control").val(),
115 'replyTo':this.model.get('how')['replyTo']}});
130 this.model.set({'how': new How({'comment':this.$("textarea.form-control").val()})});
116 this.model.set({created: new Date().toUTCString().substr(0, 25)});131 this.model.set({created: new Date().toUTCString().substr(0, 25)});
117 new LoginView({model:this.model});132 new LoginView({model:this.model});
118133
119 },134 },
120 reply: function(e) {135 reply: function(e) {
136 e.stopPropagation();
121 e.preventDefault();137 e.preventDefault();
122 var rep = new Comment();
123 rep.set({'how':{'replyTo':$(e.currentTarget).attr('for'),
124 'comment':''}});
138 var rep = new Comment({'how': new How({'replyTo':$(e.currentTarget).attr('for')})});
125 C.comments.add(rep);139 C.comments.add(rep);
126 }140 }
127 });141 });
……
156 var password = $("#password").val();156 var password = $("#password").val();
157157
158 $.ajax({158 $.ajax({
159 url: "http://127.0.0.1:5001/authenticate",
159 url: C.url + C.auth,
160 type: 'POST',160 type: 'POST',
161 data: {user: username, hash: password},161 data: {user: username, hash: password},
162 context: this.model,162 context: this.model,
……
170 });170 });
171 }});171 }});
172 }172 }
173 });
174
175 var AppView = Backbone.View.extend({
176 el: $("#comments"),
177 initialize: function() {
178 this.listenTo(C.comments, "add", this.showOne);
179
180 },
181 showOne: function(model) {
182 model.set({'how': new How(model.get('how'))});
183 var view = new CommentView({model:model});
184 $(this.el).append(view.render().el);
185 }
186
173 });187 });
174188
175})(C);189})(C);