mirror of
https://github.com/zhigang1992/m.combee.co.git
synced 2026-04-30 03:55:05 +08:00
Post comment to server and refresh local
This commit is contained in:
Kyle Fang
@@ -1,5 +1,8 @@
|
||||
define(['backbone'], function(Backbone) {
|
||||
var Comment = Backbone.Model.extend({
|
||||
initialize: function(options) {
|
||||
this.postID = options.postID;
|
||||
},
|
||||
urlRoot: function() {
|
||||
return '/api/v1/posts/' + this.postID + '/comments';
|
||||
},
|
||||
@@ -9,7 +12,7 @@ define(['backbone'], function(Backbone) {
|
||||
return es.join('/');
|
||||
},
|
||||
postDate: function() {
|
||||
return moment(this.get('createdAt')).fromNow();
|
||||
return moment(this.get('created_at')).fromNow();
|
||||
}
|
||||
});
|
||||
return Comment;
|
||||
|
||||
@@ -19,18 +19,21 @@ define([
|
||||
el: $("#content")
|
||||
});
|
||||
appRouter.on("route:index", function (){
|
||||
$("#content").empty();
|
||||
indexView.render();
|
||||
});
|
||||
var loginView = new LoginView({
|
||||
el: $("#content")
|
||||
});
|
||||
appRouter.on("route:showLogin", function (){
|
||||
$("#content").empty();
|
||||
loginView.render();
|
||||
});
|
||||
var postView = new PostsView({
|
||||
el: $("#content")
|
||||
});
|
||||
appRouter.on("route:showPost", function(id){
|
||||
$("#content").empty();
|
||||
postView.render({id: id});
|
||||
});
|
||||
appRouter.on("route:defaultAction", function (){
|
||||
|
||||
14
app/scripts/templates/commentCompose.html
Normal file
14
app/scripts/templates/commentCompose.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="compose-header">
|
||||
<span class="user">
|
||||
<img src="<%= avatar %>" alt="<%= name %>">
|
||||
<%= name %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="compose-body">
|
||||
<textarea name="comment" id="compose-comment-area" rows="3"></textarea>
|
||||
<button class="btn">回复</button>
|
||||
</div>
|
||||
<div class="compose-footer">
|
||||
<i class="error"></i>
|
||||
<a href="#">✶首页</a>
|
||||
</div>
|
||||
@@ -1,27 +1,27 @@
|
||||
<div class="post-content">
|
||||
<div class="post-header">
|
||||
<a href="users/<%= receipt.author().id %>" class="avatar">
|
||||
<img src="<%= receipt.mobileAvatar() %>" alt="<%= receipt.author().name %>">
|
||||
</a>
|
||||
<div class="info">
|
||||
<div class="organizations">
|
||||
<% _.each(receipt.get('organizations'), function(orga) { %>
|
||||
<a href="#organizations/<%= orga.id %>">
|
||||
<%= orga.name %>
|
||||
</a>
|
||||
<% }); %>
|
||||
</div>
|
||||
<div class="title">
|
||||
<%= receipt.title() %>
|
||||
</div>
|
||||
<div class="post-date">
|
||||
<%= receipt.postDateDetailed() %>
|
||||
</div>
|
||||
<div class="post-header">
|
||||
<a href="users/<%= receipt.author().id %>" class="avatar">
|
||||
<img src="<%= receipt.mobileAvatar() %>" alt="<%= receipt.author().name %>">
|
||||
</a>
|
||||
<div class="info">
|
||||
<div class="organizations">
|
||||
<% _.each(receipt.get('organizations'), function(orga) { %>
|
||||
<a href="#organizations/<%= orga.id %>">
|
||||
<%= orga.name %>
|
||||
</a>
|
||||
<% }); %>
|
||||
</div>
|
||||
<div class="title">
|
||||
<%= receipt.title() %>
|
||||
</div>
|
||||
<div class="post-date">
|
||||
<%= receipt.postDateDetailed() %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-body">
|
||||
<%= receipt.get("post").body_html %>
|
||||
<% if (receipt.hasAttachments()) { %>
|
||||
</div>
|
||||
<div class="post-body">
|
||||
<%= receipt.get("post").body_html %>
|
||||
<% if (receipt.hasAttachments()) { %>
|
||||
<div class="attachments">
|
||||
<% _.each(receipt.attachments(), function(attachment) { %>
|
||||
<a href="<%= Attachment.authorizedURL(attachment) %>">
|
||||
<% if (attachment.image) {%>
|
||||
@@ -31,9 +31,8 @@
|
||||
<% } %>
|
||||
</a>
|
||||
<% }); %>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
</div>
|
||||
|
||||
55
app/scripts/views/commentCompose.js
Normal file
55
app/scripts/views/commentCompose.js
Normal file
@@ -0,0 +1,55 @@
|
||||
define([
|
||||
'backbone',
|
||||
'text!templates/commentCompose.html',
|
||||
'helpers/loginManager',
|
||||
'models/comment'
|
||||
], function(Backbone, Template, loginManager, Comment) {
|
||||
var CommentComposeView = Backbone.View.extend({
|
||||
events: {
|
||||
'click .btn': 'saveComment'
|
||||
},
|
||||
saveComment: function(ev) {
|
||||
var message = this.$el.find("i");
|
||||
message.removeClass();
|
||||
var input = $('textarea').val();
|
||||
if (input.length) {
|
||||
ev.currentTarget.disabled = true;
|
||||
var view = this;
|
||||
this.postComment(input, {
|
||||
success: function(comment) {
|
||||
ev.currentTarget.disabled = false;
|
||||
message.addClass("message");
|
||||
message.html("发出去了，yeh...");
|
||||
$('textarea').val('');
|
||||
view.refreshComment();
|
||||
},
|
||||
error: function(comment) {
|
||||
ev.currentTarget.disabled = true;
|
||||
message.addClass("error");
|
||||
message.html("发送失败，请稍后重新发送...");
|
||||
}
|
||||
})
|
||||
} else {
|
||||
message.addClass(".error");
|
||||
message.html("评论不能为空");
|
||||
}
|
||||
},
|
||||
postComment: function(comment, options) {
|
||||
var newComment = new Comment({
|
||||
postID: this.postID
|
||||
});
|
||||
newComment.save({
|
||||
body: comment
|
||||
}, options);
|
||||
},
|
||||
render: function(options) {
|
||||
this.postID = options.postID;
|
||||
this.refreshComment = options.refreshComment;
|
||||
this.$el.html(_.template(Template, loginManager.loggedInUser()))
|
||||
},
|
||||
reply: function(targetUser) {
|
||||
//Add text to the end of the line
|
||||
}
|
||||
});
|
||||
return CommentComposeView;
|
||||
});
|
||||
@@ -5,15 +5,22 @@ define([
|
||||
], function(Backbone, Comments, Template) {
|
||||
var CommentView = Backbone.View.extend({
|
||||
render: function(options) {
|
||||
var comments = new Comments({
|
||||
this.postID = options.postID;
|
||||
this.comments = new Comments({
|
||||
postID: options.postID
|
||||
});
|
||||
this.fetchComments();
|
||||
},
|
||||
fetchComments: function() {
|
||||
var view = this;
|
||||
comments.fetch({
|
||||
this.comments.fetch({
|
||||
success: function(comments) {
|
||||
view.$el.html(_.template(Template, {comments: comments.models}));
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshComment: function() {
|
||||
this.fetchComments();
|
||||
}
|
||||
});
|
||||
return CommentView;
|
||||
|
||||
@@ -3,9 +3,18 @@ define([
|
||||
'models/receipt',
|
||||
'text!templates/post.html',
|
||||
'models/attachment',
|
||||
'views/comments'
|
||||
], function(Backbone, Receipt, Template, Attachment, CommentsView) {
|
||||
'views/comments',
|
||||
'views/commentCompose'
|
||||
], function(Backbone, Receipt, Template, Attachment, CommentsView, CommentComposeView) {
|
||||
var PostView = Backbone.View.extend({
|
||||
setupSubViews: function() {
|
||||
this.$content = $("<div class='post-content'></div>");
|
||||
this.$el.append(this.$content);
|
||||
this.$comment = $("<div class='comments'></div>");
|
||||
this.$el.append(this.$comment);
|
||||
this.$commentCompose = $("<div class='comment-composes'></div>");
|
||||
this.$el.append(this.$commentCompose);
|
||||
},
|
||||
render: function(options) {
|
||||
var view = this;
|
||||
var receipt = new Receipt({
|
||||
@@ -16,18 +25,36 @@ define([
|
||||
view.postID = receipt.get('post').id;
|
||||
view.$el.removeClass();
|
||||
view.$el.addClass('post');
|
||||
view.$el.html(_.template(Template, {receipt: receipt, Attachment: Attachment}));
|
||||
view.setupSubViews();
|
||||
view.$content.html(_.template(Template, {receipt: receipt, Attachment: Attachment}));
|
||||
view.setupCommentView();
|
||||
view.setupCommentComposeView();
|
||||
}
|
||||
});
|
||||
},
|
||||
setupCommentView: function() {
|
||||
this.$comment = $("<div class='comments'></div>");
|
||||
this.$el.append(this.$comment);
|
||||
var commentView = new CommentsView({
|
||||
this.commentView = new CommentsView({
|
||||
el: this.$comment
|
||||
});
|
||||
commentView.render({postID: this.postID});
|
||||
var view = this;
|
||||
this.commentView.render({
|
||||
postID: this.postID,
|
||||
clickUser: function(targetUser) {
|
||||
view.commentComposeView.reply(targetUser);
|
||||
}
|
||||
});
|
||||
},
|
||||
setupCommentComposeView: function() {
|
||||
this.commentComposeView = new CommentComposeView({
|
||||
el: this.$commentCompose
|
||||
});
|
||||
var view = this;
|
||||
this.commentComposeView.render({
|
||||
postID: this.postID,
|
||||
refreshComment: function(comment) {
|
||||
view.commentView.refreshComment(comment);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return PostView;
|
||||
|
||||
Reference in New Issue
Block a user