2012-06-16 5 views
0

다음과 같은 백본보기에서 Google 스트리트 뷰를 렌더링하는 문제가 발생합니다.스트리트 뷰 및 백본 변수 범위 지정

문제는 processSVData 함수에서 thisApp.DetailStreetView의 인스턴스가 아닙니다. processSVData() 안에 console.log(this)이 있으면 DOMWindow 개체가 생깁니다. this.panorama에 액세스하려고 할 때 따라서, 나는

App.DetailStreetView = Backbone.View.extend({ 
    initialize: function() { 
     this.latLng = new google.maps.LatLng(37.869085,-122.254775); 
     this.panorama = new google.maps.StreetViewPanorama(this.el); 
    }, 
    render: function() { 
     var sv = new google.maps.StreetViewService(); 
     sv.getPanoramaByLocation(this.latLng, 50, this.processSVData);   
    }, 
    processSVData: function(data, status) { 
     if (status == google.maps.StreetViewStatus.OK) { 
      // calculate correct heading for POV 
      //var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, this.latLng); 
      this.panorama.setPano(data.location.pano); 
      this.panorama.setPov({ 
       heading: 270, 
       pitch:0, 
       zoom:1, 
      }); 
      this.panorama.setVisible(true); 
     } 
    }, 
}); 

답변

1

undefined 당신은 몇 가지 옵션이 얻을. 당신은 적절한 thisprocessSVData 바인딩 _.bindAll을 사용할 수

initialize: function() { 
    _.bindAll(this, 'processSVData'); 
    //... 
} 

항상 thisprocessSVData 내부 뷰 만들 것입니다.

또한 단지 콜백 _.bind을 사용할 수

sv.getPanoramaByLocation(this.latLng, 50, _.bind(this.processSVData, this)); 

thisthis.processSVDatasv.getPanoramzByLocation 콜백으로 호출되는 뷰가 있는지 확인 것이다. $.proxy 또는 Function.bind (브라우저 버전 문제에 대해 걱정할 필요가없는 경우)과 유사한 작업을 수행 할 수도 있습니다.

아니면 일반적인 jQuery를 스타일에서 손으로 할 수는 :

var _this = this; 
sv.getPanoramaByLocation(this.latLng, 50, function(data, status) { 
    _this.processSVData(data, status); 
}); 

첫 번째, _.bindAll, 아마 백본에서 가장 흔한 방법이 될 것입니다.

+0

이미 페이지에 밑줄이 있기 때문에 최상의 솔루션입니다. 필요한 경우/사용할 수있는 경우 네이티브 바인딩을 사용합니다. – adrian

+0

@ amchang87 : Underscore의'_.bindAll'은'_.bind'를 기반으로하며, AFAIK, _.bind'는 사용 가능한 경우 기본 'Function.bind'를 사용합니다. –