2012-10-24 3 views
1

ApplicationView에 레이아웃이라는 이름의 콘센트가 하나 있고 내부에 이름없는 콘센트가있는 여러 레이아웃 클래스가 있으므로 Ember.js의 레이아웃을 동적으로 전환하려고합니다. JSfiddle : http://jsfiddle.net/ElteHupkes/SFC7R/2/을 참조하십시오.Ember.js : 콘센트가있는 레이아웃을 동적으로 전환하기

처음에는 문제가 없었지만 레이아웃을 전환 할 때 내용이 사라졌습니다. 이것은 단순히 응용 프로그램보기 (router.get('applicationView').rerender())를 다시 렌더링 할 때 발생하는 동일한 문제인 것으로 보입니다.이 질문은 다른 질문과 다소 관련이 있습니다. Re-rendering ApplicationView with outlet.

컨트롤러 바인딩이 동일하게 유지되므로 명명되지 않은 콘센트가 여전히 연결되어 있어야하고 내부 뷰 내용이 렌더링되어야한다고 말하고 싶습니다. 나는 누군가가 나를 왜 깨닫게 할 수 있기를 바라고 있습니다 :).

HTML :

<script type="text/x-handlebars" data-template-name="application"> 
    {{outlet layout}} 
    <a href="#" {{action doToggleLayout}}>Toggle layout</a> 
</script> 

<script type="text/x-handlebars" data-template-name="layout1"> 
    <h1>Layout 1</h1> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="layout2"> 
    <h1>Layout 2</h1> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    Page contents. 
</script> 

JS :

App = Ember.Application.create({ 
    autoinit: false, 
    Router: Ember.Router.extend({ 
     root: Em.Route.extend({ 
      index: Em.Route.extend({ 
       route: '/', 
       connectOutlets: function(router) { 
        // Fire toggle once as an initializer 
        router.send('doToggleLayout'); 

        router.get('applicationController').connectOutlet('index'); 
       } 
      }), 

      doToggleLayout: function(router) { 
       this.set('layoutClass', this.get('layoutClass') == App.Layout2View ? App.Layout1View : App.Layout2View); 

       router.get('applicationController').connectOutlet({ 
        viewClass: this.get('layoutClass'), 
        outletName: 'layout' 
       }); 
      } 
     }) 
    }), 

    ApplicationView: Em.View.extend({ 
     templateName: 'application' 
    }), 

    ApplicationController: Em.Controller.extend({}) 
}); 

App.IndexView = Em.View.extend({ 
    templateName: 'index' 
}); 
App.Layout1View = Em.View.extend({ 
    templateName: 'layout1' 
}); 
App.Layout2View = Em.View.extend({ 
    templateName: 'layout2' 
}); 
App.set('layoutClass', App.Layout2View); 
App.initialize(); 

답변

2

난 당신이 출구, 이전보기로 전환 (및 파단 모두 파괴 그래서 당신이 가지고있는 잠재적 인 누출 이유에 대해 생각합니다. 익명 콘센트를 다시 채워서 채우십시오.

+0

흠 실제로 콘트롤러의 뷰/레이아웃 속성은 재 렌더링 후에 비어있는 것처럼 보입니다. 그래서 분명히 당신은 맞습니다. 이제 일관되게 다시 연결하는 방법을 생각해보십시오. 모든 국가에이 논리를 하드 코딩하지 않고도 –

관련 문제