2015-02-27 5 views
0

Inspite оберточной код в app.js в функции window.onload, я получаю ошибкуне window.onload ждать, пока йот готовы

Cannot set property 'innerHTML' of undefined 

вызываемую создания HomeView по маршруту индекс , Рендер функция HomeView пытается установить шаблон в innerHtml в эле в функции визуализации

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

Как я использую некоторые ES6, этот код также tranpsiled с помощью babeljs и помещен в один файл (расслоение .js).

До пробуя функции window.onload, я использовал ES6 стиль дом готов обернуть код в app.js

$(() => { 

}); 

Как я могу действительно убедиться, что дом готов, или как я должен иначе установить el из HomeView в конкретный 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()); 
    } 

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(); 
+0

Вы никогда не устанавливая 'this.el' в вашем' HomeView'. Если он должен быть установлен в 'View', тогда вам нужно вызвать родительский конструктор, прежде чем вы получите доступ к' this'. –

+0

Да, конечно, у вас должно быть 'this._super()' где-то. Кроме того, это не имеет ничего общего с загружаемой DOM или нет. 'this.el' будет иметь значение всякий раз, когда ему присваивается значение и которое не связано с загрузкой DOM. – JLRishe

ответ

0

Проблема не с onload. Вы просто получаете доступ к свойству до его существования.

Вы никогда не устанавливая this.el в вашем HomeView конструктору:

$("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(); 
} 
0

использование

$(document).ready 

вместо

window.onload 
+1

Пожалуйста, объясните, почему это решает проблему. 'window.onload' вызывается даже позже, чем' $ (document) .ready', поэтому я не понимаю, почему коммутатор поможет. –

Смежные вопросы