BackboneJs: Uncaught TypeError: undefined不是一个函数

BackboneJs: Uncaught TypeError: undefined is not a function

本文关键字：一个 函数 Uncaught TypeError undefined BackboneJs      更新时间：2023-09-26

我有一个问题，有很多其他的帖子在这里堆栈。但是没有人解决这个问题，所以我把这个问题拿回来。

一个快速参考:Uncaught TypeError: undefined is not a function rails/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.'
    });
app: 

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

如果您使用的是backbone 0.5。x骨干网。控制器重命名为Backbone。路由器

来自文档:

升级到0.5.0+

我们利用这个机会澄清了0.5.0版本的一些命名。Controller现在是Router, refresh现在是reset。以前的saveLocation和setLocation函数已经被navigate所取代。骨干。sync的方法签名已经更改为允许向jQuery.ajax传递任意选项。如果你想使用pushState支持，请务必选择加入。

相关文章：