Question

我正在使用把手和Backbone的组合。我有一个“容器”视图，其中包含一个用于保存子视图的数组。每当我添加新视图时，都不会点击事件。

我的帖子视图：

Post.View = Backbone.View.extend({
    CommentViews: {},
    events: {
        "click .likePost": "likePost",
        "click .dislikePost": "dislikePost",
        "click .addComment button": "addComment"
    },
    render: function() {
        this.model.set("likeCount", this.model.get("likes").length);
        this.model.set("dislikeCount", this.model.get("dislikes").length);
        this.$('.like-count').html(this.model.get("likeCount") + " likes");
        this.$('.dislike-count').html(this.model.get("dislikeCount") + " dislikes");

        return this;
    }, ...

我在“容器”视图中的回调代码创建了一个新的主干视图，将其附加到车把模板并在页面上显示：

success: _.bind(function(data,status,xhr) {
                        $(this.el).find("#appendedInputButton").val('');
                        var newPost = new Post.Model(data);
                        var newPostView = new Post.View({model: newPost, el: "#wall-post-" + newPost.id});
                        var source = $("#post-template").html();
                        var template = Handlebars.compile(source);

                        var html = template(newPost.toJSON());
                        this.$('#posts').append(html);
                        newPostView.render();
                        this.PostViews[newPost.id] = newPostView;
                    }, this), ...

不确定发生了什么，但是这类代码最初是为了设置页面而设置的（因为html是在服务器端呈现的，所以没有把手）并且所有事件都可以正常工作。如果我重新加载页面，我也可以喜欢/不喜欢帖子。

我错过了什么？

Answer 1

我没有看到你将newPostView.render().el追加到dom。或者我错过了什么？

Answer 2

假设“＃post-template”包含“likePost”按钮。 newPostView永远不会添加到DOM中。

将el添加到新的Post.View使骨干搜索DOM（并且该元素尚不存在） 4行之后，一个HTML字符串被添加到DOM（假设this.el已经在DOM中）

如果在追加（html）后创建Post.View，则可以找到该元素并触发事件。
但是自然的Backbone方式是在Post.View渲染函数中呈现HTML字符串，将结果附加到它的el并将el附加到#posts元素。

success: function (data) {
  var view = new Post.View({model: new Post.Model(data)});
  this.$('#posts').append(view.render().el);
  this.PostViews[data.id] = view;
}

Backbone事件没有触发添加到DOM的新元素

2 个答案: