컨테이너 레이아웃에 렌더링되지 않은 구성 요소 레이아웃

Question

ContainerView에 동적으로 Component을 추가하는 데 문제가 있습니다. 이 jsfiddle를 참조하십시오

http://jsfiddle.net/theazureshadow/7n2hz/

구성 요소 루트 요소는 컨테이너에 배치되어 있지만, 구성 요소와 관련된 레이아웃이 렌더링되지 않습니다. 나는 template 속성을 주석 처리를 제거하면

App = Ember.Application.create({}); 

App.IndexRoute = Ember.Route.extend({}); 

App.IndexView = Ember.View.extend({ 
    didInsertElement: function() { 
     console.log('IndexView inserted'); 
     var container = this.get('container'); 
     container.pushObject(Ember.TextField.create()); 
     container.pushObject(App.MyComponent.create()); 
    } 
}); 

App.MyContainer = Ember.ContainerView.extend({ 
    didInsertElement: function() { 
     console.log('MyContainer inserted'); 
    } 
}); 

App.MyComponent = Ember.Component.extend({ 
    classNames: ['my-component'], 
    //template: Ember.Handlebars.compile('<p>Compiled directly</p>'), 
    didInsertElement: function() { 
     console.log('MyComponent inserted'); 
    } 
}); 

는 제대로 그 내용을 렌더링한다. 또한 인덱스 뷰에 직접 구성 요소를 삽입하여 올바르게 렌더링합니다 (이 경우 classNames가 추가되지는 않지만).

<script type="text/x-handlebars" data-template-name="application"> 
    {{outlet}} 
</script> 
<script type="text/x-handlebars" data-template-name="index"> 
    <h2>Render component directly:</h2> 
    {{my-component}} 
    <hr/> 
    <h2>Add component to container:</h2> 
    {{view App.MyContainer viewName="container"}} 
</script> 
    <script type="text/x-handlebars" data-template-name="components/my-component"> 
    <b>My component</b> 
</script> 

나는 Ember.run와 장난 시도했지만 운이 지금까지했습니다. pushObject에 대한 잘못된 후크 didInsertElement이 있습니까?

Answer 1

이렇게하면 문제가 해결됩니다. layoutName 속성을 참조하십시오.

App.MyComponent = Ember.Component.extend({ 
    classNames: ['my-component'], 
    layoutName: 'components/my-component', 
    didInsertElement: function() { 
     console.log('MyComponent inserted'); 
    } 
});