Question

我最近按照本教程创建了留言板： Real-time message board

董事会运作良好，但我无法弄清楚如何从视图和SignalR中删除帖子和评论。

我基本上是尝试添加每个帖子和评论的链接，以允许删除帖子/评论。我是SignalR和淘汰赛的新手，所以非常感谢帮助。

这是js：

 var post = function (id, message, username, date) {
    this.id = id;
    this.message = message;
    this.username = username;
    this.date = date;
    this.comments = ko.observableArray([]);

    this.addComment = function (context) {
        var comment = $('input[name="comment"]', context).val();
        if (comment.length > 0) {
            $.connection.boardHub.server.addComment(this.id, comment, vm.username())
            .done(function () {
                $('input[name="comment"]', context).val('');
            });
        }
    };
}

var comment = function (id, message, username, date) {
    this.id = id;
    this.message = message;
    this.username = username;
    this.date = date;
}

var vm = {
    posts: ko.observableArray([]),
    notifications: ko.observableArray([]),
    username: ko.observable(),
    signedIn: ko.observable(false),
    signIn: function () {
        vm.username($('#username').val());
        vm.signedIn(true);
    },
    writePost: function () {
        $.connection.boardHub.server.writePost(vm.username(), $('#message').val()).done(function () {
            $('#message').val('');
        });
    },
}

ko.applyBindings(vm);

function loadPosts() {
    $.get('/api/posts', function (data) {
        var postsArray = [];
        $.each(data, function (i, p) {
            var newPost = new post(p.Id, p.Message, p.Username, p.DatePosted);
            $.each(p.Comments, function (j, c) {
                var newComment = new comment(c.Id, c.Message, c.Username, c.DatePosted);
                newPost.comments.push(newComment);
            });

            vm.posts.push(newPost);
        });
    });
}

$(function () {
    var hub = $.connection.boardHub;
    $.connection.hub.start().done(function () {
        loadPosts(); // Load posts when connected to hub
    });

    // Hub calls this after a new post has been added
    hub.client.receivedNewPost = function (id, username, message, date) {
        var newPost = new post(id, message, username, date);
        vm.posts.unshift(newPost);

        // If another user added a new post, add it to the activity summary
        if (username !== vm.username()) {
            vm.notifications.unshift(username + ' has added a new post.');
        }
    };

    // Hub calls this after a new comment has been added
    hub.client.receivedNewComment = function (parentPostId, commentId, message, username, date) {
        // Find the post object in the observable array of posts
        var postFilter = $.grep(vm.posts(), function (p) {
            return p.id === parentPostId;
        });
        var thisPost = postFilter[0]; //$.grep returns an array, we just want the first object

        var thisComment = new comment(commentId, message, username, date);
        thisPost.comments.push(thisComment);

        if (thisPost.username === vm.username() && thisComment.username !== vm.username()) {
            vm.notifications.unshift(username + ' has commented on your post.');
        }
    };
});

我不确定是否需要在视图模型或帖子/评论对象中添加删除功能。

以下是观点：

            <ul class="posts list-unstyled" data-bind="foreach: posts">
        <li>
            <p>
                <span data-bind="text: username" class="username"></span><br />
            </p>
            <p>
                <span data-bind="text: message"></span>
            </p>
            <p class="no-pad-bottom date-posted">Posted <span data-bind="text: moment(date).calendar()" /></p>
            @*<form class="add-comment" data-bind="visible: $parent.signedIn(), submit: removePost">
                <div class="row">
                    <div class="col-md-3">
                        <button class="btn btn-default" type="submit" name="delete">Delete Post</button>
                    </div>
                </div>
            </form>*@
            <a href='#' data-bind='click: removePost'>Delete</a>
            <div class="comments" data-bind="visible: $parent.signedIn() || comments().length > 0">
                <ul class="list-unstyled" data-bind="foreach: comments, visible: comments().length > 0">
                    <li>

                        <p>
                            <span class="commentor" data-bind="text: username"></span>
                            <span data-bind="text: message"></span>
                        </p>
                        <p class=" no-pad-bottom date-posted">Posted <span data-bind="text: moment(date).calendar()" /></p>
                    </li>
                </ul>

                <form class="add-comment" data-bind="visible: $parent.signedIn, submit: addComment">
                    <div class="row">
                        <div class="col-md-9">
                            <input type="text" class="form-control" name="comment" placeholder="Add a comment" />
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-default" type="submit">Add Comment</button>
                        </div>
                    </div>
                </form>
            </div>
        </li>
    </ul>

我还需要将此信息传达给SignalR：

   public void WritePost(string username, string message)
        {
            var ctx = new MessageBoardContext();
            var post = new Post { Message = message, Username = username, DatePosted = DateTime.Now };
            ctx.Posts.Add(post);
            ctx.SaveChanges();

            Clients.All.receivedNewPost(post.Id, post.Username, post.Message, post.DatePosted);
        }

        public void AddComment(int postId, string comment, string username)
        {
            var ctx = new MessageBoardContext();
            var post = ctx.Posts.FirstOrDefault(p => p.Id == postId);

            if (post != null)
            {
                var newComment = new Comment { ParentPost = post, Message = comment, Username = username, DatePosted = DateTime.Now };
                ctx.Comments.Add(newComment);
                ctx.SaveChanges();

                Clients.All.receivedNewComment(newComment.ParentPost.Id, newComment.Id, newComment.Message, newComment.Username, newComment.DatePosted);
            }
        }

谢谢！

Answer 1

我会在您的虚拟机上添加deleteComment方法，该方法使用ajax对服务器进行删除调用以进行评论。如果删除成功，则可以使用相关信息广播删除并更新所有客户端。

使用Knockout.js和SignalR删除留言板帖子

1 个答案: