gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Properly binding comment comment button to the proper comment

Browse Source
This commit is contained in:
Nathan Leniz
2015-03-06 18:47:41 +09:00
parent aad15b88ba
commit 53598a8e6f
1 changed files with 50 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
views/stories/comments.jade
View File

@ -1,9 +1,10 @@
h3.text-left p.text-left
div#comment-list.comment-list div#comment-list.comment-list
script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js") script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js") script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js")
script. script.
var sentinel = 0;
var commentDetails; var commentDetails;
R.forEach(function displayComments(comment) { R.forEach(function displayComments(comment) {
console.log('this is the comment id', comment); console.log('this is the comment id', comment);
@ -22,42 +23,63 @@ h3.text-left
commentDetails = data; commentDetails = data;
var div = document.createElement('div'); var div = document.createElement('div');
$(div) $(div)
.html("" + .html("<p>" +
"<div class='row'>" + "<div class='row col-xs-12'>" +
"<div class='col-xs-3 col-sm-1 text-center'>" + "<div class='col-xs-2 text-center'>" +
"<div class='row'>" +
"<div class='col-xs-12 big-ion-up-arrow'>" +
"<i class='ion-arrow-up-b'></i>" +
"</div>" +
"</div>" +
"<div class='row'>" + "<div class='row'>" +
"<div class='col-xs-12'>" + "<div class='col-xs-12'>" +
"<h3 class='negative-5'>" +
commentDetails.rank + commentDetails.rank +
"</h3>" +
"</div>" + "</div>" +
"</div>" + "</div>" +
"</div>" + "</div>" +
"<div class='col-xs-2 col-sm-1'>" + "<div class='col-xs-1'>" +
"<img class='img-responsive' src=" + commentDetails.author.picture + "></img>" + "<img class='img-responsive' src=" + commentDetails.author.picture + "></img>" +
"</div>" + "</div>" +
"<div class='col-xs-7 col-sm-10'>" + "<div class='col-xs-8'>" +
"<div class='row'>" + "<div class='row'>" +
"<div class='col-xs-12'>" + "<div class='col-xs-12'>" +
commentDetails.body + commentDetails.body +
"</div>" + "</div>" +
"</div>" + "</div>" +
"<div class='row'>" + "<div class='row'>" +
"<div class='col-xs-12'>" + "<h6>" +
"<div class='col-xs-12 negative-15'>" +
"commented " + moment(commentDetails.commentedOn).fromNow() + " by " + "commented " + moment(commentDetails.commentedOn).fromNow() + " by " +
"<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" + "<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" +
"</div>" + "</div>" +
"</h6>" +
"</div>" +
"<div class='row'>" +
"<div class='col-xs-6 comment-a-comment'>" +
"<button id='" + commentDetails._id +"'>This is the world's best button</button>" +
"</div>" + "</div>" +
"</div>" + "</div>" +
"</div>" + "</div>" +
"</div>" +
"</p>" +
"</div>") "</div>")
.appendTo($('#comment-list')); .appendTo($('#comment-list'));
},
complete: function() {
sentinel++;
console.log(sentinel, comments.length);
if (sentinel < comments.length) {
return;
}
$('.comment-a-comment').on('click', 'button', function() {
console.log('clicked');
console.log($(this));
});
} }
}) })
}, comments); }, comments);