Question

尽管多次阅读木偶文档，我仍然无法正确理解它的某些方面。

我正在创建一个布局视图＆＃39; AppLayout＆＃39;如下：

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布局视图非常令人困惑。展望未来我需要多个嵌套视图。我被困在这里。

Answer 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'
...
});

木偶布局视图 - 为什么需要模板

1 个答案: