2016-09-08 5 views
2

I과 유사한 동적 구성 요소가 있습니다Ember 템플릿에서 HTMLBars 예외를 복구 할 수 있습니까?

{{component fooProperty owner=this}} 

fooProperty 구동 데이터이며, 때로는 dev에 적어도 지금 잘못 벗기,하지만 난 그것 (때문에 응용 프로그램에 너무 자극을 잘못 빠질 수 두려워 버전 관리, 영구 저장 장치 등). 기본적으로, 나는 이것이 항상 정확하다는 것을 믿지 않는다 (즉, 구성 요소로 해석 가능). 값이 꺼져있을 때, 전체 응용 프로그램은 비록 충돌 :

Uncaught Error: Assertion Failed: HTMLBars error: Could not find component named "some-inexisting-component" (no component or template with that name was found) 
EmberError @ ember.debug.js:19700 
assert @ ember.debug.js:6719 
assert @ ember.debug.js:19502 
componentHook @ ember.debug.js:10894 
render @ ember.debug.js:12782 
render @ ember.debug.js:12732 
handleKeyword @ ember.debug.js:46584 
keyword @ ember.debug.js:46709 
exports.default @ ember.debug.js:12483 
handleKeyword @ ember.debug.js:46545 
handleRedirect @ ember.debug.js:46531 
... 

나는 그런 예외를 잡아 충돌에서 전체 응용 프로그램을 방지하는 것을 선호합니다. 나는 예를 들어 해결 방법을 생각할 수있다. fooProperty을 조사하고 App.__container__.lookup에 대해 반품하고 일반적인 '누락'구성 요소를 반환합니다. 그러나 가능한 경우 렌더링 중에 발생하는 예외를 포착하고 처리하는 방법이 있다면 나는 여전히 선호합니다.

답변

1

간단한 대답은 "아니요,하지만 직접 구현할 수 있습니다." 템플릿 엔진은 결코 예외 처리의 역할을 수행하지 못했습니다. Handlebars/HTMLbars 케이스뿐만 아니라 JSX, Jinja 등과 같은 다른 템플릿 엔진과도 관련이 있습니다. 예외 처리에는 사용자 측면에서 지정해야하는 상당히 많은 로직이 포함되어 있으며 프리젠 테이션 역할의 범위에서 보이지 않습니다. 있다. 그 주된 이유는 Ember Framework 개발자가 앱에 추가 스파게티 코드가 많이 생겨 개발자가 코드의 가독성과 유지 보수성을 크게 떨어 뜨리지 않도록하기 위해서입니다.

사건에 대한 가능한 해결책 :

component.js

import Component from 'ember-component'; 
import get from 'ember-metal/get'; 
import getOwner from 'ember-owner/get'; 
import { isEmpty } from 'ember-utils'; 
import computed from 'ember-computed'; 

export default Component.extend({ 
    wantToRenderComponentName: 'name-that-doesnt-exist', 
    wantToRenderComponentNameExist: computed('wantToRenderComponentName', { 
     get() { 
      const owner = getOwner(this); 
      return !isEmpty(owner.lookup(`component:${get(this, 'wantToRenderComponentName')}`)) 
     } 
    })  
}); 

template.hbs

{{#if wantToRenderComponentNameExist}} 
    {{component wantToRenderComponentName}} 
{{else}} 
    // handle your exception presentationally here 
{{/if}} 

owner.lookup('component:component-name')이 응용 프로그램 내에서 초기화되는 경우 구성 요소 인스턴스를 반환 또는 undefined 그렇지 않은 경우. 일부 조건이 충족되어 메모리를 절약하면 런타임에 일부 구성 요소를 초기화하여 구성 요소가 응용 프로그램 내에서 초기화되고 템플리트에서 사용될 수 있는지 확인하는 경우를 상상할 수 있습니다. 이 코드에서 발생한 예외는 없지만 동적 구성 요소 이름 지정을 사용하므로 예외 처리가 아니기 때문에 동적 구성 요소 이름을 정적으로 지정할 때 컴파일 타임과 구분하여 런타임에 구성 요소가 있는지에 대한 실제 검사를 이동할 수 있습니다 렌더링되는 컴퍼넌트의 이름입니다.

0

프로덕션 빌드에서 어설 션 오류가 발생하지 않습니다. 그래서 당신의 앱은 크래시가 없습니다. 컴퍼넌트가 존재하는 경우는 렌더링됩니다. 그렇지 않은 경우는, 자동적으로 실패합니다.