window.onload 不会等到 dom 准备好

Question

尽管在 app.js 函数中包装了 app.js 中的代码，但我一直收到错误消息

Cannot set property 'innerHTML' of undefined

由在索引路由上创建 HomeView 触发。 HomeView的render函数尝试将模板设置为render函数中el的innerHtml

this.el.innerHTML = this.template();

由于我使用的是一些 ES6，所以这段代码也使用 babeljs 进行了转换并放入一个文件中 (bundle.js)。

在尝试 window.onload 函数之前，我使用 ES6 风格 dom 准备将代码包装在 app.js

中

$(() => {

});

我怎样才能真正确保 dom 准备就绪，或者我应该如何将 HomeView 的 el 设置为特定的 dom 节点？

app.js

window.onload = function() {
    window.myRouter = new MyRouter();
    $(window).on("hashchange", myRouter.hashChange);     
    Backbone.history.start({pushState: true})

}

main.js

export class MyRouter extends Router {

    constructor(){
        this.routes = {
            '': 'index'
        }
        this._bindRoutes();
    }
    index(){
        this.loadView(new HomeView());
    }

主视图

export class HomeView extends View {
    constructor(){

        $("body").html(this.el);
        this.template = _.template($('#main-template').html());

        this.render();
        super();


    }

    render(){

        this.el.innerHTML = this.template();

Answer 1

使用

$(document).ready

而不是

window.onload

Answer 2

问题不在于 onload。您只是在属性存在之前访问它。

您永远不会在 HomeView 构造函数中设置 this.el：

$("body").html(this.el);
this.template = _.template($('#main-template').html());
this.render();

您正在调用 this.render()，访问 this.el.innerHTML，但是您在这三行中的哪个位置设置 this.el？无处。

如果 this.el 应该由 View 设置，那么您必须在访问 this 之前 调用父构造函数：

constructor() { super(); $("body").html(this.el); this.template = _.template($('#main-template').html()); this.render(); }

window.onload 不会等到 dom 准备好

window.onload not waiting until dom ready

javascript

backbone.js

ecmascript-6