尽管多次阅读木偶文档,我仍然无法正确理解它的某些方面。
我正在创建一个布局视图' AppLayout'如下:
var AppLayoutView = Marionette.LayoutView.extend({
regions: {
headerRegion: "#ecp_header",
bodyRegion: "#ecp_layout_region"
},
...
我的应用的html代码段为上面定义的区域提供了两个dom节点:
<div id="ecp_header"></div>
<div class="container" id="ecp_layout_region">
<div class="row" id="ecp_body">
...
在app.js中的,我的调用代码是这样的..
ECPApp.on('start', function() {
require(['controller_cp', 'header_view'], function(ControllerCP, HeaderView) {
console.log("On start event executing...");
// create a event aggregator vent object and attach to app.
ECPApp.vent = new Backbone.Wreqr.EventAggregator();
var appLayoutView = new AppLayoutView();
appLayoutView.render();
//appLayoutView.showLayout();
//$('div.toolbar > ul > li:first > a').tab('show');
if (Backbone.history) Backbone.history.start();
});
这给了我错误无法渲染模板,因为它是null或未定义。
我认为layout的默认render()行为总是查找模板,所以我推出了我自己的render版本,如下所示:
render: function() {
var $self = this;
/* if no session exists, show welcome page */
var promise = ECPApp.request('entities:session');
promise.done(function(data) {
if (data.result==0) {
console.log('Valid session exists. Showing home page...!');
$self.showHome();
} else {
console.log('No session exists. Showing welcome page...!');
$self.showWelcome();
}
}).fail(function(status) {
console.log('No session exists. Showing welcome page...!');
$self.showWelcome();
});
return $self;
},
showWelcome: function() {
var self = this;
require(['header_view', 'welcome_view'],
function(HeaderView, WelcomeView) {
var headerView = new HeaderView();
var welcomeView = new WelcomeView();
self.bodyRegion.show(welcomeView);
});
}
这一次,我得到另一个错误, An&#34; el&#34; #ecp_layout_region必须存在于DOM 中。但是我确信该元素存在于DOM中,因为我可以通过检查调试控制台窗口来查看它。运行$(&#39;#ecp_layout_region&#39;)显示有效元素。
Marionette布局视图非常令人困惑。展望未来我需要多个嵌套视图。我被困在这里。
答案 0 :(得分:1)
您的模板是如何定位的?您的模板是否被<script type = “text/template”>
标记包裹?
它可能看起来像这样:
在您的html中,在head
部分:
<script type = “text/template” id="yourLayout">
<div id="ecp_header"></div>
<div class="container" id="ecp_layout_region">...</div>
</script>
在布局定义中:
var AppLayoutView = Marionette.LayoutView.extend({
template: '#yourLayout'
...
});