백본을 사용하여 이벤트에 'this'를 전달하는 방법은 무엇입니까?

Question

기능을 클릭에 바인딩하는 이벤트가 있습니다. 클릭하면 같은보기에서 다른 기능이 호출됩니다. 불행히도 범위가 올바른 범위가 아닙니다. this.otherFunction()을 수행하려고 시도 할 때 클릭에 할당 된 함수가 this.otherFunction()과 같은 범위에 있지 않습니다. otherFunction()의 범위를 전달하는 방법이 있습니까?

initialize: function() { 
    this.render(); 

    if (joinedGoalList.get(this.model.id) != null) { 
    this.renderLeaveGoal(); 
    } else { 
    this.renderJoinGoal(); 
    } 
}, 

events: { 
    "keypress #goal-update": "createOnEnter", 
    "click #join-goal": "joinGoal", 
    "click #leave-goal": "leaveGoal", 
}, 

joinGoal: function() { 
    matches = joinedGoalList.where({id: this.model.get("id")}); 
    if (matches.length == 0) { 
    joinedGoalList.create({goal_id: this.model.get("id")}, {wait: true, success: function() { 
     var self = this; 
     self.renderLeaveGoal(); 
    }, error: function() { 
     console.log("error"); 
    }}); 
    } 
}, 

renderLeaveGoal: function() { 
    console.log("render leave goal"); 
    var template = _.template($("#leave-goal-template").html()); 
    console.log(template); 
    $("#toggle-goal-join").html(template()); 
}, 

다음은 모두 동일한보기입니다. 잡히지 않은 TypeError : Object [object DOMWindow]에 'renderLeaveGoal'메서드가 없습니다. 이게 내가 잘못된 범위를 저장 한 것 같니?

Answer 1

표준 기술은 그럼 당신은 당신이 필요로하므로,이 기능은 뷰에 연결되어

this.otherFunction(); 

Answer 2

대신에

self.otherFunction(); 

을 할 수

var self = this; 

처럼 뭔가를 할 것입니다 View 객체를 호출하여 호출합니다. 뷰 기능이 자동으로 뷰의 컨텍스트에 바인딩되어 있기 때문에

success: this.renderLeaveGoal 

는이 경우에, 당신은 익명 함수가 필요하지 않습니다.

Answer 3

deltanovember의 대답은 정확하지만 그는 그것이 올바른, 그리고 내가 그 중요 느낌 이유를 설명하지 않았다

범위는 자바 스크립트의 혼란이다. 나는 그것을 추적하는 가장 쉬운 방법은 에 대해 생각할 때 무언가가 실행될 것이라고 생각했습니다. 코드 블록이 즉시 실행되면 "this"와 같은 범위에서 실행되고있을 것입니다. 함수를 나중에 호출하려고하면 "this"라는 자체 개념으로 완전히 다른 범위에서 실행됩니다.

예를 들어, 성공 콜백으로 제공하는 익명 함수는 나중에 실행되며 콜백이 정의 될 때 실행중인 코드와 동일한 "this"로 범위가 지정되지 않습니다. 이것이 오류를 일으키는 이유입니다. renderLeaveGoal은 콜백이 정의 된 범위에서 정의되었지만 콜백이 실행되는 범위에서는 정의되지 않았습니다. 이제

이 더 혼란, 변수를 만들려면 콜백이 이 그 콜백의 범위 내에서 사용할 수를 정의 할 때 정의했다. 이것이 deltanovember의 대답이 작동하는 이유입니다. 성공 콜백이 정의 될 때 변수에서 "this"를 가장함으로써 콜백은 완전히 다른 범위에도 불구하고 나중에 실행될 때 콜백에 계속 액세스 할 수 있습니다.

나는 그것이 의미가 있기를 바랍니다. 그렇지 않은 경우 코멘트, 나는 다시 시도 할 것이다 :

Answer 4

을 또한과 같이 밑줄의 bindAll 기능을 사용할 수 있습니다

장면 뒤에

initialize: function() { 
    _.bindAll(this); 
} 

, 밑줄 모든 기능은 객체에 호출을 대체합니다 "this"가 원본 객체와 동일하게 설정되는 프록시 버전.물론, 여러분의 메소드 중 하나가 그 안에 익명의 콜백 함수를 가지고 있다면, 전체 "self = this"댄스를 할 필요가 있습니다; bindAll은 객체에 대한 "외부"메소드의 컨텍스트 만 수정합니다.

각 View의 initialize() 메소드의 첫 번째 줄에 _.bindAll을 사용하는 습관이 생겼습니다.