Question

我在Backbone.js中编写了一个简单的应用程序，并且我有一个布局视图来渲染其中的所有其他视图。在我的index.html文件中，我有以下内容：

<section id="layout">
    <section id="outlet"></section>
</section>

在我的layout.js我得到了这个：

var LayoutView = Backbone.View.extend({
    el: '#layout',
    render: function (view) {
        if (this.child) this.child.remove();
        this($('#outlet').html((this.child = view).render().el);
        return this;
    }
});

在我的router.js我有以下代码：

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home'
    },
    initialize: function (options) {
        this.layout = options.layout;
    },
    home: function () {
        // renders a collection view
        this.layout.render(new ResumeList({collection: resumes}));
    }
});

最后在main.js我有这个：

$(document).ready(function () {
    var layout = new LayoutView().render();
    var router = new AppRouter({layout: layout});
    Backbone.history.start();
});

但每次我尝试在某处导航或只是启动默认页面时，控制台都会返回以下错误：

jQuery.Deferred exception: Cannot read property 'render' of undefined TypeError: Cannot read property 'render' of undefined
at n.render (http://localhost:8080/js/views/layout.js:5:51)
at HTMLDocument.<anonymous> (http://localhost:8080/js/main.js:2:35)
at j (http://localhost:8080/node_modules/jquery/dist/jquery.min.js:2:29948)
at k (http://localhost:8080/node_modules/jquery/dist/jquery.min.js:2:30262) undefined
jquery.min.js:2 Uncaught TypeError: Cannot read property 'render' of undefined

Answer 1

您的LayoutView期望将子视图传递到其渲染函数。

render: function (view) {
    if (this.child) this.child.remove();
    this($('#outlet').html((this.child = view).render().el);
    return this;
}

但是在你的main.js文件中，你正在调用没有参数的渲染。

var layout = new LayoutView().render();

您的AppRouter应该调用

render()，所以如果您只是将其更改为：

$(document).ready(function () {
    var layout = new LayoutView();
    var router = new AppRouter({layout: layout});
    Backbone.history.start();
});

应该可以在那里工作。

无法读取属性＆＃39;渲染＆＃39;尝试渲染布局视图时未定义

1 个答案: