私は2つのレイアウトを持っています。最初のレイアウトは、サブ レイアウトのレンダリングを担当します (私のインターフェイスはかなり複雑なので、すぐにビュー付きの多くのサブ レイアウトになります)。
最初のレイアウトは次のとおりです。
App.module('Layouts', function(Layouts, App, Backbone, Marionette, $, _) {
Layouts.Editor = Backbone.Marionette.Layout.extend({
tagName: 'div',
className: 'content container-fluid',
regions: {
stageContainer: '#stage-container',
},
initialize: function() {
this.template = Backbone.Marionette.TemplateCache.get('editor');
},
render: function() {
var _this = this;
this.model = new App.Models.App();
this.model.url = GLOBAL.api.url + '/clients/' + GLOBAL.cid + '/sweepstakes/' + GLOBAL.aid;
this.model.fetch({ success: function() {
// show template
$(_this.el).html(_this.template());
// show region content
_this.showStageContainer();
} });
},
showStageContainer: function() {
var content = new App.Layouts.EditorStageContainer({
model: this.model
});
this.stageContainer.show(content);
return content;
}
});
});
これはうまくレンダリングされます。ただし、showStageContainer関数でサブ レイアウトをレンダリングしようとすると、render が呼び出されますが、コンテンツは実際にはレンダリングされません。モデルをレイアウト ビューと子ビューに渡す必要があるため、モデルを取得した後に showStageContainer を呼び出していることに注意してください。ステージ コンテナのレイアウトは次のようになります。
App.module('Layouts', function(Layouts, App, Backbone, Marionette, $, _) {
Layouts.EditorStageContainer = Backbone.Marionette.Layout.extend({
el: '#stage-container',
tagName: 'div',
regions: {
nav: '#nav',
progress: '#progress',
stage: '#stage'
},
initialize: function() {
this.template = Backbone.Marionette.TemplateCache.get('editor_stage_container');
},
render: function() {
console.log('render');
$(this.el).html(this.template());
},
onShow: function() {
// TODO: figure out why the template has to be rendered on show rather
// than in the render. (render is never being called as onRender is not called)
$(this.el).html(this.template());
// show region content
this.showNav();
},
showNav: function() {
var content = new App.Views.EditorStageNav();
this.nav.show(content);
}
});
});
ご覧のとおり、onShow関数内でテンプレートを手動でレンダリングする必要があります。通常、これは関数内で自動的に行われrenderます。
最も興味深いのは$(this.el).html(this.template());、レンダリング関数で setTimeout をラップすると、すべてがうまくいくということです...これにより、何かが順番に実行されていないと思います。例：
var _this = this;
render: function() {
setTimeout(function() {
$(_this.el).html(_this.template());
}, 1);
}
何かご意見は？ここで途方に暮れており、本当に助けが必要です。ありがとう！