Ajax를 통한 백본보기에서 jQuery 템플릿을 캐시하는 방법은 무엇입니까?

Question

backbone.js 및 jQuery 템플릿을 사용하고 있습니다. 내가 뭘하고 싶은데요보기의 템플릿을 dom 요소로 설정합니다. 뷰가 초기화 될 때 템플릿이 $ .isFunction로 존재하는 경우

<script id="templateElement" type="text/x-jQuery-tmpl"> 
    <div class='foo'>bar</div> 
</script> 

, 그것은 볼 수 있습니다 : 그것은 다음과 같이 보입니다. 그렇지 않은 경우 외부 파일에서 가져 와서 반환 된 dom 요소를 body 요소에 추가 한 다음 this.template을 해당 dom 요소로 설정합니다.

다음에보기가 호출되면 해당 dom 요소가 있어야 AJAX 호출을 다시 발행 할 이유가 없어야합니다. 그러나이 템플릿은 AJAX 호출 후에 null이 아니더라도 콜백의 일부로 설정되어 있어도 정의되지 않습니다. #templateElement가 페이지의 일부 임에도 불구하고 뷰가 렌더링 될 때마다 내 AJAX 호출이 실행됩니다.

무슨 일 이니?

BbView = Backbone.View.extend({ 
    template: $('#templateElement').template(), 

    initialize: 

    //this.template is null at this point 

     if(!($.isFunction(this.template))){ 
      $.get('template/file.html', function(templates){ 
       $('body').append(templates); 
       this.template = $('#templateElement').template(); 
      }); 
    } 

    //this.template is undefined at this point 
    ... 

Answer 1

마우스 오른쪽 버튼으로 작업을 수행 할 수 있습니다. $ .get()에 대한 호출에서보기가 아닌 'this'를 잃어버린 것입니다. underscore.bind를 사용하여 뷰의 컨텍스트에서 success 콜백을 호출 할 수 있습니다.

그러나 실제로 템플릿을 DOM에 넣을 필요는 없습니다.

보기 프로토 타입에 컴파일 된 템플릿을 설정할 수 있으며이보기의 다음 인스턴스에 대한 템플릿이 있습니다. 예를 들어, ...

BbView = Backbone.View.extend({ 

    initialize: function() { 
    if(!($.isFunction(this.template))) { 
     $.get('template/file.html', _.bind(function(templates) { 
     BbView.prototype.template = $(templates).template(); 
     }), this); 
    } 
    // Now you have this.template, for this and all subsequent instances 
    } 

Answer 2

가장 좋은 추측은 $ .get 내부의 this.template이 범위를 벗어난 것입니다.

당신은

initialize: 
var self = this; 
//this.template is null at this point 

    if(!($.isFunction(self.template))){ 
     $.get('template/file.html', function(templates){ 
      $('body').append(templates); 
      self.template = $('#templateElement').template(); 
     }); 
}