내 이벤트를 수신 할 수 없습니다.

Question

DOM 관련 이벤트에 대해 2 가지 질문이 있습니다. 난 내 링크 <a class="fb_connect" href="#"><img src="img/fb-connect.png" alt="fb-connect" /></a> 아무것도 무슨 일이 생긴 없습니다 ... 클릭하면

window.homeView = Backbone.View.extend({ 
    el : $('#home-container'), 

    initialize : function() { 
     this.template = _.template($('#home-template').html()); 
     this.render(); 
    }, 

    events: { 
     "click a.fb_connect": 'fetch_user' 
    }, 

    fetch_user: function(){ 
     console.log("Fetch requested..."); 
    }, 

    render : function() { 
     this.delegateEvents(); 
     var renderedContent = this.template(this.model.toJSON()); 
     $(this.el).html(renderedContent); 
     return this; 
    } 

}); 

내가 왜 모르는, 어떤 생각 : 나는 DOM에 이벤트를 트리거하고 싶은

, 나는이 코드를 작성?

또 다른 질문으로, "맞춤 이벤트"에 대해 들었습니다. 여기서 내가하고 싶은 것은 내 페이스 북 로그인에 대한 이벤트를 트리거하는 것입니다. (예를 들어 작동하지 않는) 내 사례에서 링크를 클릭하십시오하지만 나는 페이스 북의 콜백에있는 이벤트를 호출해야합니다 데이터를 가지고, 문제는, 페이스 북의 콜백은 DOM 이벤트가 아니므로, 어떻게 생각하는지 모르겠다. 이런 종류의 일을하는 "커스텀 이벤트"?

도움 주셔서 감사합니다.

편집 : 첫 번째 질문에 대한

Answer 1

문제는 링크가보기에서 정의한 요소의 일부가 아니라는 것입니다.

당신은 당신의 템플릿으로이 :이 이벤트를 부착하고있는 요소를 포함하지 않는

<script type="text/template" id="home-template"> 
      <span><%= id %></span> 
      <span><%= username %></span> 
      <span><%= facebook_id %></span> 
      <span><%= facebook_token %></span> 
</script> 

.

Backbone의 이벤트 해시를 통해 이벤트를 첨부하는 것은 jQuery에서 on 메서드의 델리게이트 기능을 사용하지만 템플릿이 실제로 첨부 된 시점을 알지 못하기 때문에 (따라서 액세스 할 수 있음) 백본은 이벤트를 부착 할 때, 그것은 el : $('#home-container')

에 의해 정의됩니다 귀하의 경우, 백본에 의해 생성 된 주변 요소에 첨부합니다 그래서, 그것은 사용 this.$el가 el 제공 싸서 jQuery를하다

this.$el.on("click", "a.fb_connect", this.fetch_user); 

을 (또는 , className 및 id의 조합으로 생성 된). <a class="fb_connect"...></a> 이후

는 jQuery를 만 div#home-container의 하위 클래스 fb_connect 앵커 태그에 클릭 이벤트를 수신하기 때문에 클릭 이벤트가 발생하지 도착 결코 <div id="home-container>의 자식이 아니다. 그것은 작동

<script type="text/template" id="home-template"> 
      <span><%= id %></span> 
      <span><%= username %></span> 
      <span><%= facebook_id %></span> 
      <span><%= facebook_token %></span> 
      <a href="#" class="fb_connect">OK !</a>​ 
</script> 

: 당신이 템플릿을 변경하는 경우

. (바이올린에서 확인).

여기에 더 자세히 설명하는 데 도움이되는 documentation for .on from jQuery이 있습니다.

과는

Answer 2

,보고 at this answer있다; DOM이 준비되기를 기다렸나요?

두 번째로는 백본보기에서 모델/컬렉션 이벤트에 의존 할 수없는 경우 펍/하위 라이브러리 (this one)를 사용하는 것이 좋습니다.