Backbone collection, backend confusion, marionette implementation

Question

I'm new to all the backend side of things, so hopefully this is one of the questions I'm gonna look back to and think "man, that was silly of me". Let me start. I want to make an application where you can draw rectangles on a screen. Every rectangle is a model represented by an ItemView and every screen is a collection represented by a CollectionView. Rectangles are added to the collection once they are created by the user, dynamically.

When the user clicks on a "new screen" button, the following takes place

 MyController = Backbone.Marionette.Controller.extend({
  initialize:function() {
    i=0;
  },

  newScreen: function() { 
      i=i+1;
      this.collection = new Rectangles([],{id: i});
      routestring = "screen/"+i;
      router.navigate(routestring);
      canvas.show(new ScreenView({collection: this.collection})); 
  },
...

I use an iterator for the different screens so that my backend looks like this

demo.firebaseio.com/screens/1

I am using Firebase's backbone bindings but I have absolutely no idea on how I can access a collection that's already stored on the server. The reason is that I want to be able to navigate through the different screens, fetch the collection from that url, and render it...

Here's my collection code

Rectangles = Backbone.Collection.extend({
  initialize: function(models, options) {
    this.id = options.id;
  },
  url: function() {
    return 'https://demo.firebaseio.com/screen/'+this.id;
  },

  model: Rectangle,
  firebase: function() {
    return new Backbone.Firebase("https://demo.firebaseio.com/screen/"+this.id)
  }
});

and here's my router code!

var Router = Backbone.Marionette.AppRouter.extend({
  controller: myController,
      appRoutes: {
      '': 'newScreen',
      'screen/:number': 'doSomething'
    }
})

I'm open to any suggestions, and I do understand that I might have done something horribly wrong!

Shouldn't Rectangles = Backbone.Firebase.Collection.extend( ...... ) ? — Mike Pugh, Jan 14 '14 at 18:11

score 1 · Answer 1 · answered Jan 14 '14 at 19:03

1

The following should work:

Rectangles = Backbone.Collection.extend({
  firebase: new Backbone.Firebase("https://demo.firebaseio.com/screens/"+this.id),
});

However, you'll need to call Collection.sync() to initially fetch the data. The alternative is to use a truly realtime collection in the form of Backbone.Firebase.Collection:

Rectangles = Backbone.Firebase.Collection.extend({
  firebase: new Firebase("https://demo.firebaseio.com/screens/"+this.id),
});

In this case you won't have to call fetch/sync/save etc. - the collection is always kept in sync with Firebase. There's more documentation on how this works here: http://firebase.github.io/backfire/

answered Jan 14 '14 at 19:03

Anant

7,408
1
30
30

I forgot to mention that I've tried both backfire implementations Backbone.Firebase as well as Backbone.Firebase.Collection. I guess my question could be more specific: what should I have in my "doSomething" method of myController so that I can verify that the path exists in the server, and if so to fetch and render the collection data. – IgnorantUser Jan 15 '14 at 08:19
The data will be 'null' on paths that don't exist, or you'll get the data in your collection. You'll know when you can check this by listening to the 'sync' event that is fired when the remote data has been downloaded. – Anant Jan 17 '14 at 22:39

Backbone collection, backend confusion, marionette implementation

1 Answers1