Commit 49f87bb8513b01ede9171bcbc7fe20bf3d009942

  • avatar
  • arvind
  • Fri Mar 07 15:11:05 IST 2014
Code refactor.
  • app.js 25 ----------+++++++++++++++
  • index.html 94 -------------------------------------------------+++++++++++++++++++++++++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

app.js

85 });85 });
86 },86 },
87 comparator: function(model1, model2) {87 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')))){
91 return 1;89 return 1;
90 }
91 else{
92 return -1;
93 }
92 }94 }
93 }
95
94 });96 });
9597
96 var CommentView = Backbone.View.extend({98 var CommentView = Backbone.View.extend({
97 el: $("#comments-container"),
98 tagName: 'div',99 tagName: 'div',
100 attributes: {
101 'class':'comments'
102 },
99 template: _.template($("#commented-template").html()),103 template: _.template($("#commented-template").html()),
100 edit_template: _.template($("#comment-template").html()),104 edit_template: _.template($("#comment-template").html()),
101 events:{105 events:{
……
107 "click .comment button": "reply"107 "click .comment button": "reply"
108 },108 },
109 initialize: function() {109 initialize: function() {
110
110 if(this.model.get('how').get('replyTo').length) {111 if(this.model.get('how').get('replyTo').length) {
111 var item = '#' + this.model.get('how').get('replyTo');112 var item = '#' + this.model.get('how').get('replyTo');
112 this.setElement($(item));113 this.setElement($(item));
113 }114 }
114 // this.listenTo(this.model.collection, "add", this.render);
115 this.render();
115 // this.render();
116 },116 },
117 render: function() {117 render: function() {
118 if(this.model.isNew()) {118 if(this.model.isNew()) {
……
122 $(this.el).append(this.template(this.model.toJSON()));122 $(this.el).append(this.template(this.model.toJSON()));
123123
124 }124 }
125 return this;
126 },
125127
126 },
127
128 save: function(e) {128 save: function(e) {
129 /* Create a sweet and send it to the sweet store.129 /* Create a sweet and send it to the sweet store.
130 Update the view to include the comment */130 Update the view to include the comment */
……
176 });176 });
177177
178 var AppView = Backbone.View.extend({178 var AppView = Backbone.View.extend({
179 el: $("#comments-container"),
179 initialize: function() {180 initialize: function() {
180 this.listenTo(C.comments, "add", this.showOne);181 this.listenTo(C.comments, "add", this.showOne);
181182
……
186 model.set({'how': new How(model.get('how'))});186 model.set({'how': new How(model.get('how'))});
187 }187 }
188 var view = new CommentView({model:model});188 var view = new CommentView({model:model});
189
189 $(this.el).prepend(view.render().el);
190 }190 }
191191
192 });192 });

index.html

3 <link rel="stylesheet"3 <link rel="stylesheet"
4 href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"4 href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
5 type="text/css" media="screen" />5 type="text/css" media="screen" />
6 <style>
7 .comment{ margin-left: 2em; }
8 </style>
6 </head>9 </head>
7 <body class="container">10 <body class="container">
8 <p>Comment below</p>11 <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>
21 </div>21 </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">
35 </div>42 </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">
45 </div>46 </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>
52 </div>47 </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>
53 </div>54 </div>
54 </div>55 </div>
55 <script type="text/javascript"56 <script type="text/javascript"
……
58 <script type="text/javascript"58 <script type="text/javascript"
59 src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>59 src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
60 <script type="text/javascript">60 <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(); }
69 </script>64 </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>
72 <script type="text/javascript" src="app.js"></script>67 <script type="text/javascript" src="app.js"></script>
7368
74 </body>69 </body>