Question

以下是我渲染子区域的代码：

regions: {
    header: '#header-region',
    nav: '#nav-region',
    content: '#content-region'
},
...
onRender: function () {
    console.log('on render dashboardLayout...');
    this.showChildView('nav', new Nav());
},

在布局视图完成渲染后调用onRender。然后我按照official document的建议尝试。微小差异是父视图是根视图，并通过调用render（）而不是通过调用show（）来呈现，因此我将子视图呈现代码放在onRender回调中。

刷新浏览器时它正常工作，但生成

backbone.marionette.js:448 Uncaught Error: An "el" undefined must exist in DOM

使用浏览器后出现

错误和前进按钮。我试着追溯但在这个过程中迷路了。

你能告诉我我做错了什么吗？

我为这个问题奋斗了一天，然后找到了解决方法。我认为这不是Marionettejs框架的预期方式。

var Mn = require('backbone.marionette');
require('backbone.stickit');
var $ = require('jquery');
var api = require('../../models/_api.js');
var appData = require('../../routes/_data.js');
var Nav = require('./nav/nav.layout.js');

var DashboardLayout = Mn.LayoutView.extend({
    initialize: function () {
    },
    el: '#app-container',
    template: require('./dashboard.layout.html'),
    regions: {
        /* regions hash defined here will only work 1st time when invoke render(). 2nd time calling render(), region has is not connected to DOM 
        */
    },
    onBeforeRender: function () {
        var thisView = this; 
        api.company.getInfo()
            .then(function(result){
                console.log(result);
                if(result.code !== 2000) {
                    // not login, or can't find user
                    Backbone.history.navigate('/login', true);
                } else {
                    if(!result.company) {
                        // TODO: show model dialog
                        console.log(result);
                    }
                }
            });
    },
    onRender: function () {
        this.addRegion('nav', '#vs-nav-region');
        this.addRegion('header', '#vs-header-region');
        this.addRegion('content', '#vs-content-region');

        var ss = new Nav();
        var navRegion = this.getRegion('nav');

        navRegion.show( ss);
    }
});

module.exports = DashboardLayout;

这是我触发布局视图的路线代码：

var Mn = require('backbone.marionette');
var RootLayout = require('../views/root/root.layout.js');
var LoginLayout = require('../views/login/login.layout.js');
var SignupLayout = require('../views/signup/signup.layout.js');
var DashboardLayout = require('../views/dashboard/dashboard.layout.js');
var Router = Mn.AppRouter.extend({
    routes: {
        '': 'default',
        'login(/)': 'login',     // http://localhost:8080/#/login
        'signup(/)': 'signup',    // http://localhost:8080/#/signup
        'dashboard/sent(/)': 'sent',
        'dashboard(/)': 'sent'
    }, 
    initialize: function () {
        var initData = this.getOption('keyInOptions');
    },
    // below are route functions
    default: function () {

        if(!this.rl) {
            this.rl = new RootLayout();
        }
        this.rl.render();
    }, 
    login: function () {
        // if you new it every time the route is triggered,
        // multiple event binding will happen. Since the root
        // layout view is not managed by region manager, so
        // it is not properly destroyed. 
        if(!this.ll) {
            this.ll = new LoginLayout();
        }

        this.ll.render();

    },
    signup: function () {
        if(!this.sl) {
            this.sl = new SignupLayout();
        }
        this.sl.render();
    },
    sent: function () {
        if(!this.dl) {
            this.dl = new DashboardLayout();
        }
        this.dl.render(); // render by calling render() on layout view
    }
});

Marionettejs在使用浏览器时向后渲染子区域错误并向前移动按钮

0 个答案: