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