Firebase and Backbone

Question

I am trying to build a basic app using Backbone and Firebase:

http://jsfiddle.net/C9wew/6324/

var counter = 0;

var Box = Backbone.Firebase.Model.extend({
    defaults: {
        number: 0
    },
    //firebase: new Firebase('https://backbone-firebase.firebaseio.com/box')
});

var BoxList = Backbone.Firebase.Collection.extend({
    model: Box,
    firebase: new Firebase('https://backbone-firebase.firebaseio.com/')
});

var Boxes = new BoxList;

var AddBox = Backbone.View.extend({
    el: $('#addBox'),
    events: {
        "click" : 'addBox'
    },
    addBox: function () {
        console.log("adding box");
        Boxes.add({
            number: counter
        });
        counter = counter+1;
    }
});

var addBox = new AddBox();

Error stack trace:

Uncaught TypeError: undefined is not a function backfire.min.js:1

b.Firebase.Collection.b.Collection.extend.constructor backfire.min.js:1
d backbone-min.js:27
(anonymous function) (index):56
jQuery.event.dispatch jquery-git2.js:4397
elemData.handle jquery-git2.js:4076

Uncaught TypeError: Cannot assign to read only property 'id' of 1 backfire.min.js:1
a.extend._childAdded backfire.min.js:1
(anonymous function) firebase.js:93
ic firebase.js:43
Wd firebase.js:93
Ud.Jb firebase.js:93
Xd.Jb firebase.js:94
(anonymous function) firebase.js:109
(anonymous function) firebase.js:59
cc firebase.js:55
R firebase.js:59
(anonymous function) firebase.js:109
Sa firebase.js:23xe firebase.js:109
W firebase.js:109
h.hc firebase.js:117
h.gc firebase.js:85
dd.gc firebase.js:76
(anonymous function) firebase.js:74
Lc firebase.js:58
W.onmessage firebase.js:57

The problem is, I am getting a lot of weird errors with Firebase. I have read that weird bugs exist in Firefox, but now I am using Chrome and getting different errors.

Answer 1

A couple of things here.

• BackboneFire (formally BackFire) has been updated to a 0.5 version with a lot of updates. Rather than using the firebase property you use the url property to specify your Firebase reference.

• Don't use a Backbone.Firebase.Model with a Backbone.Firebase.Collection. A collection can manage it's models events. In the 0.5 model the models within a Backbone.Firebase.Collection have a firebase reference that can handle their updates to Firebase.

The issue here is that you're trying to sync a primitive value, a string in this case.

Rather than sync the string go one level up and sync the object. Backbone represents models and not primitives. Therefore everything synced in BackboneFire has to be an object as well.