require.js和bone.js获取未捕获的TypeError

Question

i'm trying to write a simple app using backbone.js, that in the end shall save the models in an indexedDB and display them. I loosely based it on the todo app in the backbone examples. It is working fine when i'm not using require.js.

When i'm trying to use require though i get an Uncaught TypeError: Object # has no method 'on' error that seems to point to the point where i add some eventlisteners in one of my views.

My Files are ordered like this: In the folder "js" are the folders "app", "lib" and "tpl" and the main.js. In app are a folder "controller" with the taskItemView and the taskListView, and a folder "model" with my taskModel.js and the database.js. In the folder "lib" are my external libraries, backbone, underscore, jquery, json2, require, text, the adapter for the indexedDB backbone-indexeddb.js and a shim for browsers that only support websql, IndexedDBShim.js.

This is my main.js, where i'm trying to configure 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();
    }
);

I am getting the error on line 22 in my taskListView, here.

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('');
    },
});
});

Just for completion, this is my 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;
    }
});
});

My Model:

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
    };
});

The Database Manager,

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();
        }
    }]
}
});

And my router. i didn't use one in the non-require.js app, but i must use one here.

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();
        }
    });
});

I'm at a loss and forever grateful.

Edit: The full error stack:

    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

Answer 1

listenTo method needs an instance of model as the first parameter, instead variable taskList is being passed which contains definition of model. Please create an instance of model and then pass it to the listenTo method.