1
我正在嘗試使用backbone.js編寫一個簡單的應用程序，最終應將模型保存在indexedDB中並顯示它們。我鬆散地將其基於示例中的todo應用程序。 當我不使用require.js時它工作正常。require.js和backbone.js獲取Uncaught TypeError
當我試圖使用需求，雖然我得到一個Uncaught TypeError：對象＃沒有方法'on'錯誤，似乎指向我在一個視圖中添加一些eventlisteners點。
我的文件是這樣排列的：在文件夾「js」中是文件夾「app」，「lib」和「tpl」以及main.js.在應用程序是一個文件夾「控制器」與taskItemView和taskListView，並與我的taskModel.js和database.js文件夾「模型」。在文件夾「lib」中，我的外部庫，主幹，下劃線，jquery，json2，require，text，適用於indexedDB backbone-indexeddb.js的適配器以及僅支持websql IndexedDBShim.js的瀏覽器墊片。
這是我的main.js，我正在嘗試配置require。
require.config({
baseUrl: "js/lib",
paths: {
app: '../app',
tpl: '../tpl'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'backbone-indexeddb': {
deps:['backbone']
},
'IndexedDBShim': {
deps:['backbone']
}
}
});
require(
['backbone', 'app/router'], function (Backbone, Router) {
var router = new Router();
Backbone.history.start();
}
);
我在我的taskListView，在這裏得到第22行的錯誤。
define(function (require) {
"use strict";
var $ = require('jquery'),
Backbone = require('backbone'),
_ = require('underscore'),
//Template = require('text!tpl/taskListView.html'),
taskList = require('app/model/taskModel');
//the collection for our tasks
//var Tasks = new TaskList;
//this will handle all the user inputs and the output for the gui.
return Backbone.View.extend({
el: $("#taskApp"),
//on enter keypress fires createOnEnter
events: {
"keypress #taskInput": "createOnEnter",
},
//initializes the app
initialize: function() {
//listeners
this.listenTo(taskList, 'add', this.addOne); //this is where the error comes from.
this.listenTo(taskList, 'all', this.render);
//get the template
//var template = _.template(Template);
template: _.template($('#taskListView').html()),
//apply template
this.$el.html(template);
//get text input field
this.input = this.$("#taskInput");
this.main = $('#main');
//fetch old entries
taskList.fetch();
},
//renders the main section
render: function() {
this.main.show();
},
//appends an item to the list
addOne: function (taskModel) {
var view = new taskItemView({
model: taskModel
});
this.$("#taskList").append(view.render().el);
},
//creates a new item from the text input field
createOnEnter: function (e) {
//check for valid input (enter)
if (e.keyCode != 13) return;
//check if input is empty
if (!this.input.val()) return;
//get data
var inputData = this.input.val();
//creates and adds new item to collection
taskList.create({
title: inputData
});
//clear input field
this.input.val('');
},
});
});
剛剛完成，這是我taskItemView：
define(function (require){
"use strict";
var $ = require('lib/jquery'),
_ = require('lib/underscore'),
Backbone = require('lib/backbone');
//Template = require('lib/text!tpl/taskItemTemplate.html');
//manage task items and binding
return Backbone.View.extend({
tagName: "li",
classname: "topcoat-list__item",
//template used for task Items
template: _.template($('#taskItemView').html()),
//template: _.template(Template),
//initialize, create listener for changes in model
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
//use template to display task items
render: function() {
//fetch JSON representation of model
var modelJSONrepresentation = this.model.toJSON();
//inject into template
var templating = this.template(modelJSONrepresentation);
//apply template
this.$el.html(templating);
return this;
}
});
});
我的模型：
define(function (require) {
"use strict";
var $ = require('jquery'),
Backbone = require('backbone'),
//taskDatabase = require('app/model/database'),
//manage task items
task = Backbone.Model.extend({
//bind indexedDB
//database: taskDatabase,
//storeName: "tasks",
defaults: function() {
return {
title: "test"
};
}
}),
//manage list of tasks
taskList = Backbone.Collection.extend({
//bind model
model: task,
//bind indexedDB
//database: taskDatabase,
//storeName: "tasks"
});
return {
task: task,
taskList: taskList
};
});
的數據庫管理器，
define(function (require){
"use strict";
//create indexedDB
var taskDatabase = {
id: "taskDataBase4",
description: "The Database used in the TaskList App",
migrations: [{
version: 1,
migrate: function (transaction, next) {
var store = undefined;
//create store if it doesn't exist already
if (!transaction.db.objectStoreNames.contains("tasks")) {
store = transaction.db.createObjectStore("tasks")
}
store = transaction.objectStore("tasks");
next();
}
}]
}
});
而且我的路由器。我沒有在非require.js應用程序中使用它，但我必須在這裏使用一個。
define(function (require){
"use strict";
var $ = require('jquery'),
Backbone = require('backbone'),
TaskListView = require('app/controller/taskListView');
taskListView = new TaskListView();
return Backbone.Router.extend({
routes: {
"": "home"
},
home: function() {
console.log("derp");
taskListView.delegateEvents();
}
});
});
我很茫然，永遠感激。
編輯：完整的錯誤堆棧：
Uncaught TypeError: Object #<Object> has no method 'on' backbone.js:226
Events.(anonymous function) backbone.js:226
Backbone.View.extend.initialize taskListView.js:22
Backbone.View backbone.js:1002
child backbone.js:1567
(anonymous function) router.js:9
context.execCb require.js:1650
Module.check require.js:866
(anonymous function) require.js:1113
(anonymous function) require.js:132
(anonymous function) require.js:1156
each require.js:57
Module.emit require.js:1155
Module.check require.js:917
(anonymous function) require.js:1113
(anonymous function) require.js:132
(anonymous function) require.js:1156
each require.js:57
Module.emit require.js:1155
Module.check require.js:917
(anonymous function) require.js:1113
(anonymous function) require.js:132
(anonymous function) require.js:1156
each require.js:57
Module.emit require.js:1155
Module.check require.js:917
Module.enable require.js:1143
Module.init require.js:774
callGetModule require.js:1170
context.completeLoad require.js:1544
context.onScriptLoad
這個文件是你稱爲「我的模型」的文件，它是由'taskList = require（'app/model/taskModel'）導入的文件;'？ – max