Question

我遇到的问题是Stack中有很多其他帖子。但没有人能解决这个问题所以我正在解决这个问题。

快速参考： Uncaught TypeError: undefined is not a function rails3/backbone/js

我正在用backBoneJs编写我的第一个应用程序。这是我要遵循的例子：

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

当我执行代码时：

1 - Uncaught TypeError: Cannot call method 'extend' of undefined (Controller 1ºline)

2 - Uncaught TypeError: undefined is not a function              (app 6º line)
App.initapp.js:6
(anonymous function)/backbone/#:32
f.extend._Deferred.e.resolveWithjquery-1.6.4.min.js:2
e.extend.readyjquery-1.6.4.min.js:2
c.addEventListener.C

检查我的代码：

的index.html

<html>
    <head>
        <title></title>
        <link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <h1><a href="#">Editor de Documentos</a></h1>
        <h2>Backbone + PHP by Lqdi</h2>

        <div id="notice"></div>
        <div id="app"></div>
        <script type="text/javascript" src="js/_libs/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="js/_libs/json2.js"></script>
        <script type="text/javascript" src="js/_libs/underscore.js"></script>
        <script type="text/javascript" src="js/_libs/backbone.js"></script>
        <script type="text/javascript" src="js/_libs/jquery.dotimeout.js"></script>

        <script type="text/javascript" src="js/app.js"></script>

        <script type="text/javascript" src="js/controllers/documents.js"></script>
        <script type="text/javascript" src="js/models/document.js"></script>
        <script type="text/javascript" src="js/collections/documents.js"></script>


        <script type="text/javascript" src="js/views/edit.js"></script>
        <script type="text/javascript" src="js/views/index.js"></script>
        <script type="text/javascript" src="js/views/notice.js"></script>

        <script type="text/javascript">
            $(function() {
                App.init();
            });
        </script>
    </body>
</html>

类别：

App.Collections.Documents = Backbone.Collection.extend({
    model: Document,
    url: '/documents'
});

控制器：

App.Controllers.Documents = Backbone.Controller.extend({
    routes: {
        "documents/:id":            "edit",
        "":                         "index",
        "new":                      "newDoc"
    },

    edit: function(id) {
        var doc = new Document({ id: id });
        doc.fetch({
            success: function(model, resp) {
                new App.Views.Edit({ model: doc });
            },
            error: function() {
                new Error({ message: 'Could not find that document.' });
                window.location.hash = '#';
            }
        });
    },

    index: function() {
        var documents = new App.Collections.Documents();
        documents.fetch({
            success: function() {
                new App.Views.Index({ collection: documents });
            },
            error: function() {
                new Error({ message: "Error loading documents." });
            }
        });
    },

    newDoc: function() {
        new App.Views.Edit({ model: new Document() });
    }
});

型号：

var Document = Backbone.Model.extend({
    url : function() {
      var base = 'documents';
      if (this.isNew()) return base;
      return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
    }
});

查看：

edit.js

App.Views.Edit = Backbone.View.extend({
    events: {
        "submit form": "save"
    },

    initialize: function() {
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        this.render();
    },

    save: function() {
        var self = this;
        var msg = this.model.isNew() ? 'Successfully created!' : "Saved!";

        this.model.save({ title: this.$('[name=title]').val(), body: this.$('[name=body]').val() }, {
            success: function(model, resp) {
                new App.Views.Notice({ message: msg });
                Backbone.history.saveLocation('documents/' + model.id);
            },
            error: function() {
                new App.Views.Error();
            }
        });

        return false;
    },

    render: function() {
        $(this.el).html(JST.document({ model: this.model }));
        $('#app').html(this.el);

        // use val to fill in title, for security reasons
        this.$('[name=title]').val(this.model.get('title'));

        this.delegateEvents();
    }
});

index.js

App.Views.Index = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        $(this.el).html(JST.documents_collection({ collection: this.collection }));
        $('#app').html(this.el);
    }
});

notice.js

 App.Views.Notice = Backbone.View.extend({
        className: "success",
        displayLength: 5000,
        defaultMessage: '',

        initialize: function() {
            _.bindAll(this, 'render');
            this.message = this.options.message || this.defaultMessage;
            this.render();
        },

        render: function() {
            var view = this;

            $(this.el).html(this.message);
            $(this.el).hide();
            $('#notice').html(this.el);
            $(this.el).slideDown();
            $.doTimeout(this.displayLength, function() {
                $(view.el).slideUp();
                $.doTimeout(2000, function() {
                    view.remove();
                });
            });

            return this;
        }
    });

    App.Views.Error = App.Views.Notice.extend({
        className: "error",
        defaultMessage: 'Uh oh! Something went wrong. Please try again.'
    });

该应用：

var App = {
    Views: {},
    Controllers: {},
    Collections: {},
    init: function() {
        new App.Controllers.Documents();
        Backbone.history.start();
    }
};

Answer 1

如果您使用的是主干0.5.x，则Backbone.Controller将重命名为Backbone.Router

来自文档：

升级到0.5.0 +

我们借此机会澄清了0.5.0版本的一些命名。控制器现在是路由器，现在重置刷新。之前的saveLocation和setLocation函数已被navigate替换。 Backbone.sync的方法签名已更改为允许将任意选项传递给jQuery.ajax。如果你想使用它，请务必选择加入pushState支持。

BackboneJs：Uncaught TypeError：undefined不是函数

1 个答案: