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 @@
|
|||||||
|
if (!window.AsciiIo){
|
||||||
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