Ember에서 부분 뷰의 비동기로드

Question

서버의 URL에서 동적으로 생성 된 부분 뷰를로드 할 수 있도록 Ember 도우미를 만들었습니다.

Ember.Handlebars.helper('serverPartial', function(url, options) { 
    var template; 

    $.ajax(url, { 
     async: false, 
     success: function(templateText){ 
      template = Ember.Handlebars.compile(templateText); 
     } 
    }); 

    template(this, options); 
}); 

그리고이 같은 부모 핸들 바 템플릿에서라고 : 그것은 다음과 같습니다 당신이 볼 수 있듯이

{{serverPartial templateUrl}} 

는 AJAX 호출이 서버에서 템플릿을 검색하는 동기입니다 왜냐하면 Ember 프레임 워크가 예상 한대로 템플릿 내용을 반환하는 다른 방법을 찾을 수 없었기 때문입니다. 불행하게도,이 동기 호출은 전체 상위 템플릿의 렌더링을 유지합니다.

템플릿에 대한 약속 또는 부분 뷰를 비동기 적으로 또는 독립적으로로드 할 수있는 다른 방법을 제공하는 방법이 있습니까?

Answer 1

팁 주셔서 감사합니다. @Rajat. 나는 이것을 달성하기 위해 Views을 사용하여 끝냈다. 초기에 기본 자식 템플릿을로드 한 뷰 컨테이너를 만든 다음 자식을 삽입 한 후 서버에서 실제 내용을로드합니다. 여기 제가 취한 접근 방식입니다 :

App.LoadingView = Ember.View.extend({ 
    didInsertElement: function(){ 
     var container = this._parentView; 
     $.get('http://server/serverTemplate', function(data){ 
      container.pushObject(Ember.View.create({ 
       template: Ember.Handlebars.compile(data) 
      })); 
      container.removeObject(container.get('loadingView')); 
     }); 
    }, 
    template: Ember.Handlebars.compile('client awesome') 
}); 

// inherit from ContainerView and initialize with default content 
App.SnippetView = Ember.ContainerView.extend({ 
    childViews: ['loadingView'], 
    loadingView: App.LoadingView.create() 
}); 

나는 이것을 표현하는 더 좋은 방법이있을 것이라고 확신하지만, 최소한 일을합니다.

Answer 2

먼저 핸들 바 헬퍼를 사용하여 수행하려는 작업이 의도 한 작업이 아닙니다. 핸들 바 도우미는 엄격하게 마크 업 형식이므로 간단한 HTML 조정에 사용해야합니다.

둘째, 전형적인 엠버 애플 리케이션에서, 당신이하려는 것은 결코 완료되지 않습니다. 템플릿을 '주문형'으로 가져 오는 것은 없습니다.

앱이로드되어 클라이언트에 게시 될 때 모든 템플릿이 한 번의 스윕으로 다운로드되기 때문입니다. 이 함수는 JavaScript 함수에 사전 컴파일되어 Ember.Handlebars 해시에 Strings으로 저장됩니다.

앱이로드 될 때 다운로드되어보기가 렌더링 될 때 평가됩니다. 그동안 그들은 단순히 Strings으로 살고 있습니다.

지금하고있는 일을 여전히하고 싶다면 Views에서 시도하는 것이 좋습니다.