구성 및 요소에 대한 백본보기를 렌더링 함께 문제에

Question

안녕 내가 실행 해요을 클릭 백본 JS

나는 코멘트보기

class window.CommentView extends Backbone.View 
    el: $('.comment') 
    initialize: -> 
    @$el.show() 
    events: 
    "click": "renderCommentBoxView" 

    renderCommentBoxView: -> 
    @commentBoxView = new CommentBoxView 
     id: this.$('.comment')['context']['activeElement']['id'] 
     model: new Item 
     el: @el 

과 의견 상자보기를

class window.CommentBoxView extends Backbone.View 
    el: $('.commentBoxMain') 

    events: 
    "click.comment": "showCommentBox" 
    "click document": "stopEvent" 
    "click .login_button": "submitComment" 
    initialize: -> 
    @showCommentBox() 

    stopEvent: (event) -> 
    event.stopPropagation() 

    showCommentBox: -> 
    $(@el).append('<textarea class=\'commentBox\'></textarea><br/><input type=\'button\' class=\'login_button\' name=\'Add a comment\' value=\'Add a comment\'><span class=\'loading\' style=\'display: none;\'>Loading...</span>') 

이제 사용자가 댓글을 작성할 수있는 항목이 여러 개 있습니다. 그래서 코멘트 버튼을 클릭 할 때마다 요소와 모델을 정의하는 CommentBoxView라는 새로운 뷰를 렌더링합니다.

문제는 뷰를 바인딩해야하는 현재 클릭 된 요소를 가져올 수 없다는 것입니다.

내 샘플 HTML은 다음과 같이 보일 것이다 : 주석 링크를 클릭 이제까지

<div id="item_1"> 
    <a class="comment" href='javascript:void(0)'>Comment</a> 
    <div class="commentMainBox"></div> 
    </div> 
    <div id="item_2"> 
    <a class="comment" href='javascript:void(0)'>Comment</a> 
    <div class="commentMainBox"></div> 
    </div> 

언제는 commentMainBox에서 HTML을 구성하고 덤프. 하지만 문제는 클릭 한 요소가 항상 내 페이지에 클래스 설명이있는 첫 번째 요소라는 것입니다. 올바른 div에 내용을 렌더링 할 수 있도록 현재 클릭 된 요소를 어떻게 얻을 수 있습니까?

또한 CommentBoxView의 요소는 el: $('.commentBoxMain')이어야하지만이 값을 할당하면 아무 것도 렌더링되지 않습니다. 그러나 el: $('.comment')으로 초기화하면 주석 상자가 표시되지만 항상 첫 번째 주석 아래에서 렌더링됩니다. 클릭했습니다.

어디로 잘못 가고 있습니까?

Answer 1

CommentView에서 @el을 인스턴스화하는 CommentBoxView으로 전달하면 안됩니다. CommentBoxView 클래스의 el: $('.commentBoxMain')이 작동하지 않습니다. Backbone.js 워드 프로세서 말하는 것처럼 : 그렇지 않으면, new View({el: existingElement})

: 당신이 DOM에 이미 요소를 참조하는 뷰를 생성하려는 경우

는, 옵션으로 요소 전달 View은 새 요소를 만들려고합니다. 그래서 당신이 원하는 것은 :이 (@$이 요소 내에 범위가 있기 때문에) 주석보기 내 년대 commentMainBox 요소를 찾아 CommentBoxView의 요소로 그를 제공 할 것입니다

@commentBoxView = new CommentBoxView 
    model: new Item 
    el: @$('.commentMainBox') 

.