DOM에 추가 된 새 요소에서 백본 이벤트가 발생하지 않음

Question

핸들 막대와 백본의 조합을 사용하고 있습니다. 자식 뷰를 보유 할 배열이있는 "컨테이너"뷰가 하나 있습니다. 새보기를 추가 할 때마다 클릭 이벤트가 바인딩되지 않습니다.

내 게시물보기 :

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

나는 dom에 newPostView.render().el을 붙이는 것을 보지 않는다. 또는 somehting이 없습니까?

Answer 2

"# post-template"에 "likePost"버튼이 있다고 가정하십시오. newPostView는 DOM에 추가되지 않습니다.

새 Post.View에 el을 추가하면 백본 검색에서 DOM이 만들어지고 (아직 요소가 존재하지 않음) 4 줄 뒤에 HTML 문자열이 DOM에 추가됩니다 (this.el이 이미 DOM에 있다고 가정 함).)

append (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; 
}