Initial implementation of comments - in progress
parent
9094b8b0b6
commit
5201b3f768
@ -0,0 +1,6 @@
|
||||
class AsciiIo.Models.Comment extends Backbone.Model
|
||||
|
||||
class AsciiIo.Collections.Comments extends Backbone.Collection
|
||||
model: AsciiIo.Models.Comment
|
||||
|
||||
url: '/api/asciicasts/1/comments.json'
|
@ -0,0 +1,10 @@
|
||||
<ul class="comments">
|
||||
</ul>
|
||||
|
||||
<form id="new-comment">
|
||||
<p>
|
||||
<textarea type="text" name="body" id="comment-body"></textarea>
|
||||
</p>
|
||||
|
||||
<input type="submit" value="Post">
|
||||
</form>
|
@ -0,0 +1,13 @@
|
||||
<div class="left">
|
||||
<a href="#"><img src="{{user.avatar_url}}" alt="{{user.nickanme}}" class="avatar" /></a>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div>
|
||||
<span class="user-name">{{user.nickname}}</span>
|
||||
<span class="when">{{created}}</span>
|
||||
</div>
|
||||
<div class="body">{{body}}</div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
@ -0,0 +1,10 @@
|
||||
class AsciiIo.Views.CommentEntry extends Backbone.View
|
||||
|
||||
template: JST['backbone/templates/comments/show']
|
||||
tagName: 'li'
|
||||
className: 'comment'
|
||||
|
||||
render: ->
|
||||
$(@el).html(@template(@model.toJSON()))
|
||||
|
||||
this
|
@ -0,0 +1,35 @@
|
||||
class AsciiIo.Views.CommentsIndex extends Backbone.View
|
||||
|
||||
el: '#comments'
|
||||
template: JST['backbone/templates/comments/index']
|
||||
|
||||
events:
|
||||
'submit #new-comment': 'createComment'
|
||||
|
||||
initialize: ->
|
||||
@collection.on('reset', @render, this)
|
||||
@collection.on('add', @render, this)
|
||||
|
||||
render: ->
|
||||
$(@el).html @template
|
||||
$comments = this.$('.comments')
|
||||
|
||||
@collection.each (comment) ->
|
||||
view = new AsciiIo.Views.CommentEntry({ model: comment, collection: @collection})
|
||||
$comments.append view.render().el
|
||||
|
||||
this
|
||||
|
||||
createComment: (event) ->
|
||||
event.preventDefault()
|
||||
attrs = body: $('#comment-body').val()
|
||||
@collection.create attrs,
|
||||
wait: true
|
||||
success: -> $('#new-comment')[0].reset()
|
||||
error: @handleError
|
||||
|
||||
handleError: (comment, response) ->
|
||||
if response.status == 422
|
||||
errors = $.parseJSON(response.responseText).errors
|
||||
for attribute, messages of errors
|
||||
alert "#{attribute} #{message}" for message in messages
|
@ -1 +1,3 @@
|
||||
window.AsciiIo = {};
|
||||
if (!window.AsciiIo){
|
||||
window.AsciiIo = {};
|
||||
}
|
||||
|
@ -0,0 +1,38 @@
|
||||
#comments { }
|
||||
.comments { }
|
||||
|
||||
#new-comment {
|
||||
padding: 10px;
|
||||
|
||||
textarea{
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
li.comment {
|
||||
list-style-type: none;
|
||||
margin: 20px 10px;
|
||||
|
||||
width: 450px;
|
||||
.left {
|
||||
float: left;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float:right;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.when {
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
.user-name{
|
||||
color: #2786C2;
|
||||
}
|
||||
.body {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue