Question

现在我正在使用此代码来发布帖子。 我正在使用jQuery方法将喜欢更改为不同并更改喜欢计数

查看

Streaming.Views.StreamsIndex = Backbone.View.extend({
  events: {
    'click .like-icon': 'post_liked',
  },

  initialize: function(){
    this.model = new Streaming.Models.StreamsIndex();
    this.model.bind('post_likeSuccess', this.post_likeSuccess);
  },

  post_liked: function(event) {
    event.preventDefault();
    event.stopPropagation();
    current_target = $(event.currentTarget);
    liked_id = current_target.attr("id");
    href = current_target.attr('href');
    this.model.like(href, liked_id); // calls model to send API call for Like
  },

  post_likeSuccess: function(data, liked_id) {
    $("#" + liked_id).attr({
        "href": data.unlike,
        "title": "Unlike",
        "rel": "Unlike",
        "class": "likehead-ico_active" // changing like icon
    });
    //changing like count 
    $("#"+ liked_id+"_count").text(parseInt($("#"+ liked_id+"_count").text()) + 1);
  }
});

型号：

Streaming.Models.StreamsIndex = Backbone.Model.extend({
  like: function(href, liked_id) {
    var self = this;
    $.ajax({
        url: href,
        type: "POST",
        dataType: "json",
        async: false,
        success: function (data) {
            self.trigger('post_likeSuccess', data, liked_id);
        },
        error: function (data) {
            self.trigger('post_likeFail', data, liked_id);
            alert("This action was not performed");
        }
    });
  }
});

我有更好的方法吗？
在喜欢帖子之后，我可以将Like文本更改为unLike，在不使用jquery的情况下以更好的方式更改类似的计数吗？

Answer 1

此代码存在几个问题。我会尝试逐一解决它们。

您的Streaming.Views.StreamsIndex似乎有多个posts。它应该分解为通过集合呈现的组件视图，以便集合中的每个模型都绑定到视图。你可以，也许称之为Streaming.Views.StreamPost
1. 您的初始化方法有：
  this.collection = this.model.posts(); // Or something to this effect
2. 您的渲染方法将具有：
```
// addPost is a function
// that takes 'post' as a parameter
// build the corresponding view object
// and appends it to the posts container

this.collection.each(this.addPost, this)

// example of how addPost looks

var view = new Streaming.Views.StreamPost({model: post});
this.$('#posts-container').append(view.render().el);
```
事件监听器'click .like-icon': 'post_liked'应位于新组件视图Streaming.Views.StreamsIndex上，并在上面addPost中实例化。有了这个，你不必使用丑陋的current_target = $(event.currentTarget)黑客。您始终this.model.get('id')获取id的{{1}}。在使用Backbone时，他将不的拇指规则使用jQuery或任何其他形式的原始DOM操作。这就是观点和观点模板是为了！通过放置一点逻辑（尽可能少）来调整模板，如果喜欢帖子则显示某些内容，如果帖子尚未被喜欢则显示其他内容。决定是否喜欢帖子的工作由post模型完成。我通常在视图中编写包装器方法，在模型上调用相关方法。
不使用Post等自定义事件，而是更新模型的状态并重新渲染视图。如果您像我上面提到的那样更新了模板，那么重新渲染会处理您正在进行的所有DOM操作。

Backbone.js - 喜欢帖子，代码重构

1 个答案: