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

Question

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

我正在创建一个布局视图“AppLayout”，如下所示：

var AppLayoutView = Marionette.LayoutView.extend({

    regions: {
        headerRegion: "#ecp_header",
        bodyRegion: "#ecp_layout_region"
    },
    ...

我的应用程序的 html sn-p 具有上述定义区域的两个 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();

    });

这给了我错误无法呈现模板，因为它为空或未定义。

我认为布局的默认 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);              
        });
    }

这一次，我收到另一个错误消息，“el”#ecp_layout_region 必须存在于 DOM 中。但是，我确信该元素存在于 DOM 中，我可以通过在调试控制台窗口中查看它。运行 $('#ecp_layout_region') 显示一个有效元素。

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