javascript - Backbone.js - 未捕获类型错误 : Cannot call method 'receivedEvent' of undefined

Question

我在我的项目中使用backbone.js。在浏览器上运行项目时出现此错误。

Uncaught TypeError: Cannot call method 'receivedEvent' of undefined

我的代码

define(['jquery', 'underscore', 'backbone', 'model/username/usernameModel', 'text!modules/home/homeViewTemplate.html'], function($, _, Backbone, usernameModel, homeViewTemplate) {
    var HomeView = Backbone.View.extend({
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },
        events: {
            "click #nextButton": "next",
            "click #resetButton": "resetPassword"
        },
        next: function(event) {
            window.location.replace("#login");
        },
        resetPassword: function() {
            window.location.replace("#reset");
        },
        render: function() {
            this.$el.html(homeViewTemplate);
        }
    });
    return HomeView;
});

我在这里定义了我的应用程序

require.config({
    //path mappings for module names not found directly under baseUrl
    paths: {
        jquery:     'vendor/jqm/jquery_1.7_min',
        jqm:     'vendor/jqm/jquery.mobile-1.1.0', 
        underscore: 'vendor/underscore/underscore_amd',
        backbone:   'vendor/backbone/backbone_amd',
        text:       'vendor/require/text',
        cordova:       'vendor/phoneGap/cordova',
        wikitudePlugin:       'vendor/wikitude/WikitudePlugin',
        plugin:    'plugin',
        initOptions:   'initOptions',
        main:   'main',
        messages:   'messages',
        templates:  '../templates',
        modules:    '../modules',
        model:       '../model'
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery': {
            exports: '$'
        },
        'jqm': {
            deps: ['jquery'],
            exports: '$'
        },
        'initOptions': {
            deps: ['jquery'],
            exports: '$'
        },
        'main': {
            deps: ['jquery'],
            exports: '$'
        },
        'messages': {
            deps: ['jquery'],
            exports: '$'
        },
        'cordova': {
            deps: ['jquery'],
            exports: '$'
        },
        'wikitudePlugin': {
            deps: ['jquery'],
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
    }

});

//1. load app.js, 
//2. configure jquery mobile to prevent default JQM ajax navigation
//3. bootstrapping application
define(['app','jqm-config'], function(app) {
    $(document).ready(function() {
      console.log("DOM IS READY");// Handler for .ready() called.
    });    
    app.initialize();
});

为什么？

Answer 1

app 未在您的 HomeView 中定义。它不知道它是什么(因此，“无法在未定义时调用方法 receiveEvent”。

有多种方法可以为监听器绑定(bind)上下文。您可以让您的 bindEvents 函数执行以下操作:

bindEvents: function() {
  document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},

并更改 onDeviceReady 以适用于 app 的任何实例，因此只需使用 this:

onDeviceReady: function() {
  this.receivedEvent('deviceready');
},