window.onload 不等到 dom 准备好

Question

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

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})

}

ma​​in.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

问题不在于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();
}

Answer 2

使用

$(document).ready

而不是

window.onload