Question

I’m creating a Backbone App, and although everything seems to work i’m afraid i might need to refactor very soon if I keep adding functionalities and views with this approach.
I’m using Parse in the backend, meaning that the object Parse is equivalent to the Backbone.Model.
I can’t control my models since they’ve been optimized for mobile and here i need to display only certain key values of 3 different models.

Although there’s nothing “wrong” (it works) it’s only a matter of time until i start doing ‘bigger’ mistakes.

Here’s my Router:

App.Controllers.Documents = Backbone.Router.extend({
    routes:{
        "story/:id" : "fullStory",
        "" : "index"
    },
// ...
   fullStory: function(id){
     var self = this;
     var query = new Parse.Query(Steps);
     query.equalTo("story", id)
     var steps = query.collection();

     steps.fetch({
       success: function() {

         new App.Views.Steps({ collection: steps });

         var title = new Story({ objectId: id });
         title.fetch({
              success: function(model, resp) {
              new App.Views.Title({ model: title});
              var idUser = title.toJSON().idUser;
              var user = new Parse.User({ objectId: idUser });
              user.fetch({
                  success: function(){
                         // I just need the username key here...
                     new App.Views.Username({model:user,el:$("#user")});
                  },
                  error: function(){
                     new Error({ message: 'Could not find the user you requested.' });
                  }
               })
             },
              error: function() {
                new Error({ message: 'Could not find that story.' });

               }
          })
        },
        error: function() {
          new Error({ message: "Error loading story." });
        }
      });
}

Given the way objects have been created in Parse I need to access 3 different objects, that’s why i’m rendering the View in “parts”.
I’d like this function to render just a FullStory View with these ‘sub views’ inside of it but i’m unsure on how to do it ’cause the Parse.Objects need a reference to the other object -> var user = new Parse.User({ objectId: idUser }); where idUser is a key from another object.

Finally my Views:

App.Views.Steps = Backbone.View.extend({
  tagName : "ul",
  className: "steps",
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html(_.template($("#story_steps").html())({ collection: this.collection }));
    $('#steps_wrapper').html(this.el);
  },
});

App.Views.Title = Backbone.View.extend({
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html(_.template($("#story_title").html())({ model: this.model }));
    $('#title').html(this.el);
  }
});
App.Views.Username = Backbone.View.extend({
  initialize: function() {
   this.render();
  },
  template: _.template('<%= name %>'),

  render: function() {
  this.$el.html(this.template(this.model.toJSON()));
  }
});

Answer 1

You’re going about this the wrong way. Your router should be a couple of lines of code to make the initial view/collection and maybe do the fetch call. Most of the functionality should be in your views.

Your router should do this

fullStory: function(id){
     var self = this;
     var query = new Parse.Query(Steps);// not sure what this does
     query.equalTo("story", id) // This does nothing!
     var stepsCollection = query.collection();
     var stepsView = new App.View.Steps({collection: stepsCollection});
     stepsCollection.fetch() // you could also do this in initialize()
}

Now the thing you need to know is that collection.fetch() triggers a ‘reset’ event on the collection which bubbles up to the view, where you can handle it. So listen for your ‘reset’ event in the view and handle it, and re-render:

App.Views.Steps = Backbone.View.extend({
  tagName : "ul",
  className: "steps",
  initialize: function() {
      this.bindAll(this, 'render');
    this.collection.bind('reset', this.render);
  },
  render: function() {
    this.$el.html(_.template($("#story_steps").html())({ collection: this.collection }));
    $('#steps_wrapper').html(this.el);
  },
});

Remember the single responsibility principle the StepsView is responsible for rendering and dealing with events for Steps (whatever they are) and their respective models/collection. Username view is responsible for rendering and handling everything to do with usernames. At the moment the responsibility for everything is being implemented in your Router and this approach is completely wrong.

I’d question whether you need separate view for USername and Title – these should be rendered out as part of the template of a wider view – not views of their own – they don’t do anything.

I’m sensing that you smelled something wrong which is why you posted your question. I’d go for a significant refactor – get your router down to a few lines… Your views will always be the biggest classes in backbone.

If you want to get backbone nailed down fast, I highly recommend the excellent peepcode screencasts:

https://peepcode.com/products/backbone-js
https://peepcode.com/products/backbone-ii
https://peepcode.com/products/backbone-iii

You’ll understand everything in about 3 hours and for $30