Javascript Backbone.js-未捕获类型错误:无法调用方法';receivedEvent';未定义的
我正在为我的项目使用backbone.js。在浏览器上运行项目时出现此错误Javascript Backbone.js-未捕获类型错误:无法调用方法';receivedEvent';未定义的,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我正在为我的项目使用backbone.js。在浏览器上运行项目时出现此错误 Uncaught TypeError: Cannot call method 'receivedEvent' of undefined 我的代码 define(['jquery', 'underscore', 'backbone', 'model/username/usernameModel', 'text!modules/home/homeViewTemplate.html'], function($, _, Bac
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();
});
为什么?
应用程序未在HomeView中定义。它不知道它是什么(因此,'不能在未定义上调用方法receivedEvent
有几种方法可以绑定侦听器的上下文。您可以让bindEvents
函数执行以下操作:
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
并将ondevicerady
更改为与app
的任何实例一起使用,因此只需使用this
:
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
尝试此操作,则不必在backbone.view中的initialize中设置任何内容,还可以删除bindEvent()
define(['app','jqm-config'], function(app) {
document.addEventListener('deviceready', function (e) {
app.receivedEvent();
});
});