我正在尝试使用backbone.js编写一个简单的应用程序,最终将模型保存在indexedDB中并显示它们。我松散地基于主干示例中的待办事项应用程序。 当我不使用 require.js 时它工作正常。
当我尝试使用 require 时,虽然我得到了 Uncaught TypeError: Object # has no method 'on' 错误,这似乎表明我在我的 View 之一中添加了一些事件监听器。
我的文件的顺序如下:在文件夹“js”中,有文件夹“app”、“lib”和“tpl”以及 main.js。在应用程序中,有一个包含taskItemView和taskListView的文件夹“controller”,以及一个包含我的taskModel.js和database.js的文件夹“model”。在文件夹“lib”中是我的外部库、backbone、underscore、jquery、json2、require、text、indexedDBbackbone-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
最佳答案
listenTo 方法需要一个模型实例作为第一个参数,而是传递包含模型定义的变量 taskList。请创建一个模型实例,然后将其传递给listenTo方法。
关于javascript - require.js 和backbone.js 出现 Uncaught TypeError,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21865868/