Backbone.js-未捕獲的TypeError：無法調用未定義的方法'receivedEvent'

Question

我正在為我的項目使用bone.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

您的HomeView中未定義該app 。 它不知道它是什么（因此，'無法在未定義的方法上調用ReceivedEvent方法。

有幾種方法可以為偵聽器綁定上下文。 您可以讓bindEvents函數執行以下操作：

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

並將onDeviceReady更改為可與任何app實例一起使用，因此只需使用this ：

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

Answer 2

define(['app','jqm-config'], function(app) {
    document.addEventListener('deviceready', function (e) {
       app.receivedEvent();
    });  
});

嘗試一下，那么您就不必在骨架.view的initialize中設置任何內容，也可以刪除bindEvent（）