Commit 49f87bb8513b01ede9171bcbc7fe20bf3d009942

  • avatar
  • arvind
  • Fri Mar 07 15:11:05 IST 2014
Code refactor.
app.js
(15 / 10)
  
8585 });
8686 },
8787 comparator: function(model1, model2) {
88 if(model1.get('created') < model2.get('created') &&
89 model1.get('how')['replyTo'] == model2.get('how')['replyTo']) {
90 console.log(model1, model2);
88 if((new Date(model1.get('created')) < new Date(model2.get('created')))){
9189 return 1;
90 }
91 else{
92 return -1;
93 }
9294 }
93 }
95
9496 });
9597
9698 var CommentView = Backbone.View.extend({
97 el: $("#comments-container"),
9899 tagName: 'div',
100 attributes: {
101 'class':'comments'
102 },
99103 template: _.template($("#commented-template").html()),
100104 edit_template: _.template($("#comment-template").html()),
101105 events:{
……
107107 "click .comment button": "reply"
108108 },
109109 initialize: function() {
110
110111 if(this.model.get('how').get('replyTo').length) {
111112 var item = '#' + this.model.get('how').get('replyTo');
112113 this.setElement($(item));
113114 }
114 // this.listenTo(this.model.collection, "add", this.render);
115 this.render();
115 // this.render();
116116 },
117117 render: function() {
118118 if(this.model.isNew()) {
……
122122 $(this.el).append(this.template(this.model.toJSON()));
123123
124124 }
125 return this;
126 },
125127
126 },
127
128128 save: function(e) {
129129 /* Create a sweet and send it to the sweet store.
130130 Update the view to include the comment */
……
176176 });
177177
178178 var AppView = Backbone.View.extend({
179 el: $("#comments-container"),
179180 initialize: function() {
180181 this.listenTo(C.comments, "add", this.showOne);
181182
……
186186 model.set({'how': new How(model.get('how'))});
187187 }
188188 var view = new CommentView({model:model});
189
189 $(this.el).prepend(view.render().el);
190190 }
191191
192192 });
index.html
(45 / 49)
  
33 <link rel="stylesheet"
44 href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
55 type="text/css" media="screen" />
6 <style>
7 .comment{ margin-left: 2em; }
8 </style>
69 </head>
710 <body class="container">
811 <p>Comment below</p>
9 <div id="comment-container">
10 <div id="comments">
12 <div id="comments-container">
1113
12 </div>
13
14 <div id="commented">
15
16 </div>
17 <script type="text/template" id="commented-template">
18 <div class="comment">
19 <div id=<%= id %> replyTo=<%= how.replyTo %>><%= how.comment %></div>
20 <button class="btn btn-primary" for=<%= id %>>Reply</button>
14 </div>
15 <script type="text/template" id="commented-template">
16 <div class="comment" id=<%= id %> replyTo=<%= how.replyTo %>>
17 <p><%= how.comment %></p>
18 <p><small><i>Posted by <%= who %> at <%= created %></i></small></p>
19 <button type="button" class="btn btn-default btn-sm reply" for=<%= id
20 %>><span class="glyphicon glyphicon-comment"></span></button>
2121 </div>
22 </script>
23 <script type="text/template" id="comment-template">
24 <div class="new-comment">
25 <textarea class="form-control"><%= how.comment %></textarea>
26 <button class="btn btn-primary btn-danger cancel">Cancel</button>
27 <button class="btn btn-primary save">Save</button>
28 </div>
29 </script>
30 <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
31 <div class="modal-dialog">
32 <div class="modal-content">
33 <div class="modal-header">
34 <h4 class="modal-title" id="ModalLabel">Sign in!</h4>
22 </script>
23 <script type="text/template" id="comment-template">
24 <div class="new-comment">
25 <textarea class="form-control"><%= how.comment %></textarea>
26 <button class="btn btn-default btn-sm cancel"><span class="glyphicon
27 glyphicon-remove"></button>
28 <button class="btn btn-default btn-sm save"><span class="glyphicon
29 glyphicon-ok"></span></button>
30 </div>
31 </script>
32 <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
33 <div class="modal-dialog">
34 <div class="modal-content">
35 <div class="modal-header">
36 <h4 class="modal-title" id="ModalLabel">Sign in!</h4>
37 </div>
38 <div class="modal-body">
39 <div class="form-group">
40 <label class="sr-only" for="username">Username</label>
41 <input type="text" class="form-control" id="username" placeholder="Enter username">
3542 </div>
36 <div class="modal-body">
37 <div class="form-group">
38 <label class="sr-only" for="username">Username</label>
39 <input type="text" class="form-control" id="username" placeholder="Enter username">
40 </div>
41 <div class="form-group">
42 <label class="sr-only" for="password">Password</label>
43 <input type="password" class="form-control" id="password" placeholder="Password">
44 </div>
43 <div class="form-group">
44 <label class="sr-only" for="password">Password</label>
45 <input type="password" class="form-control" id="password" placeholder="Password">
4546 </div>
46 <div class="modal-footer">
47 <button type="button" class="btn btn-default"
48 data-dismiss="modal">Close</button>
49 <button type="button" id="saveButton" class="btn btn-primary"
50 data-dismiss="modal">Login</button>
51 </div>
5247 </div>
48 <div class="modal-footer">
49 <button type="button" class="btn btn-default"
50 data-dismiss="modal">Close</button>
51 <button type="button" id="saveButton" class="btn btn-primary"
52 data-dismiss="modal">Login</button>
53 </div>
5354 </div>
5455 </div>
5556 <script type="text/javascript"
……
5858 <script type="text/javascript"
5959 src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
6060 <script type="text/javascript">
61 window.C = window.C || {};
62 window.onload = function(){
63 C.what = "swaracomment";
64 C.url = "http://127.0.0.1:5001";
65 C.auth = "/authenticate";
66 C.sweet= "/sweets";
67 C.get = "/sweets/q";
68 C.init(); }
61 window.C = window.C || {}; window.onload = function(){ C.what =
62 "swaracomment"; C.url = "http://127.0.0.1:5001"; C.auth =
63 "/authenticate"; C.sweet= "/sweets"; C.get = "/sweets/q"; C.init(); }
6964 </script>
70 <script type="text/javascript" src="http://underscorejs.org/underscore.js"></script>
71 <script type="text/javascript" src="http://backbonejs.org/backbone.js"></script>
65 <script type="text/javascript" src="//underscorejs.org/underscore-min.js"></script>
66 <script type="text/javascript" src="//backbonejs.org/backbone-min.js"></script>
7267 <script type="text/javascript" src="app.js"></script>
7368
7469 </body>