如何在 Backbone、Firebase 和 Backfire 中使用 RequireJS答案

【问题标题】：How to Use RequireJS with Backbone, Firebase, and Backfire如何在 Backbone、Firebase 和 Backfire 中使用 RequireJS
【发布时间】：2014-06-16 01:29:46
【问题描述】：

我正在尝试在一个项目中同时使用 RequireJS、Backbone、Firebase 和 Backfire，但我很难开始。这是一个简单的例子：

main.js

require.config({
    paths: {
        backbone: 'backbone',
        backfire: 'backfire',
        firebase: 'firebase',
        underscore: 'underscore',
        jquery: 'jquery',

        test: 'test'
    },

    shim: {
        'firebase': {
            exports: 'Firebase'
        },

        'underscore': {
            exports: '_'
        },

        'backbone': {
            deps: [ 'underscore', 'jquery' ],
            exports: 'Backbone'
        },

        'backfire': {
            deps: [ 'backbone', 'firebase', 'underscore' ]
        }
    }
});

requirejs([ 'test' ]);

test.js

define([ 'backbone', 'firebase', 'backfire' ], function( Backbone, Firebase ){
    var Person = Backbone.Model.extend({
        defaults: function() {
            return {
                fName: 'John',
                lName: 'Doe'
            };
        }
    });

    var database = Backbone.Firebase.Collection.extend({
        model: Person,

        firebase: new Firebase( 'https://ref.firebaseio.com' )
    });

    console.log( typeof database ); // function

    // The following throws "Uncaught TypeError: undefined is not a function"
    database.add( new Person({ fName: 'Matthew', lName: 'Hasbach' }));
});

您能提供的任何帮助将不胜感激。

【问题讨论】：

我相当肯定，由于 Firebase 内部会执行一些自己的请求，因此您需要等待 Firebase 对象被实例化。 Requirejs 有一个测试方法（我不记得语法）来等待一个对象在被认为加载之前初始化。你需要利用它。
@Kato 下午好。 Firebase 在 test.js 中执行定义回调函数时完全实例化。我通过完全绕过Backbone、创建new Firebase 并设置测试值来测试这一点。请参阅我修改后的问题。

标签： javascript backbone.js requirejs firebase

【解决方案1】：

您需要先实例化您的集合（使用new）。

var database = new Backbone.Firebase.Collection.extend({
    model: Person,
    firebase: new Firebase( 'https://ref.firebaseio.com' )
});

【讨论】：

谢谢！这有很大帮助，但我无法像您的示例一样在相同的任务中定义和实例化 database。我必须先做var database = Backbone.Firebase.Collection.extend(...)，然后再做var db = new database才能让它工作。如果你能在你的回答中解决这个问题，我会接受。我是 Backbone 的新手，很想知道这个“问题”是否仅针对 Backbone.Firebase.Collection 或所有 Backbone 集合。

【解决方案2】：

正如 jgillich 在他的回答中所说，我没有实例化 Backbone.Firebase.Collection。但是需要注意的是，在 Backbone 中，为了在同一个赋值中定义和实例化一个集合，不能使用extend 方法。相反，必须使用new Backbone.Collection。这也适用于其他 Backbone 对象，例如模型。

但是，Backbone.Firebase.Collection 的定义和实例化（在撰写本文时）必须拆分为单独的分配。似乎不支持new Backbone.Firebase.Collection。这是一个例子：

test.js

define([ 'backbone', 'firebase', 'backfire' ], function( Backbone, Firebase ){
    var Person = Backbone.Model.extend({
        defaults: function() {
            return {
                fName: 'John',
                lName: 'Doe'
            };
        }
    });

    var Database = Backbone.Firebase.Collection.extend({
        model: Person,

        firebase: new Firebase( 'https://ref.firebaseio.com' )
    });

    var db = new Database;

    // Success!
    db.add( new Person({ fName: 'Matthew', lName: 'Hasbach' }));

    // Uncaught TypeError: Cannot read property 'ref' of undefined
    var nope = new Backbone.Firebase.Collection({
        model: Person,

        firebase: new Firebase( 'https://ref.firebaseio.com' )
    });
});

【讨论】：