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

78
views/stories/comments.jade
View File

@ -1,9 +1,10 @@
h3.text-left
p.text-left
div#comment-list.comment-list
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.
var sentinel = 0;
var commentDetails;
R.forEach(function displayComments(comment) {
console.log('this is the comment id', comment);
@ -22,42 +23,63 @@ h3.text-left
commentDetails = data;
var div = document.createElement('div');
$(div)
.html("" +
"<div class='row'>" +
"<div class='col-xs-3 col-sm-1 text-center'>" +
"<div class='row'>" +
"<div class='col-xs-12 big-ion-up-arrow'>" +
"<i class='ion-arrow-up-b'></i>" +
.html("<p>" +
"<div class='row col-xs-12'>" +
"<div class='col-xs-2 text-center'>" +
"<div class='row'>" +
"<div class='col-xs-12'>" +
"<h3 class='negative-5'>" +
commentDetails.rank +
"</h3>" +
"</div>" +
"</div>" +
"</div>" +
"<div class='row'>" +
"<div class='col-xs-12'>" +
commentDetails.rank +
"<div class='col-xs-1'>" +
"<img class='img-responsive' src=" + commentDetails.author.picture + "></img>" +
"</div>" +
"<div class='col-xs-8'>" +
"<div class='row'>" +
"<div class='col-xs-12'>" +
commentDetails.body +
"</div>" +
"</div>" +
"<div class='row'>" +
"<h6>" +
"<div class='col-xs-12 negative-15'>" +
"commented " + moment(commentDetails.commentedOn).fromNow() + " by " +
"<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" +
"</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 class='col-xs-2 col-sm-1'>" +
"<img class='img-responsive' src=" + commentDetails.author.picture + "></img>" +
"</div>" +
"<div class='col-xs-7 col-sm-10'>" +
"<div class='row'>" +
"<div class='col-xs-12'>" +
commentDetails.body +
"</div>" +
"</div>" +
"<div class='row'>" +
"<div class='col-xs-12'>" +
"commented " + moment(commentDetails.commentedOn).fromNow() + " by " +
"<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</p>" +
"</div>")
.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);