Backbone.js App approach not very scalable - nested views

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()));
 }
});

• Bill Barry: Why is title inside the response from steps.fetch?
• Bill Barry: Does fetch return a Promise-like object?
• Maroshii: I'm not sure how to go about rendering one view with two models since they have relations.

Answer 1

The success function for the user.fetch statement is annoying. Just messing around, I am not sure this is any better as a whole (or if it even works):

var Util = {
 error: function (msg) {
 return function () { new Error({ message: msg }); };
 }
};
var controllers = {};
_.extend(controllers, Backbone.Events);
var events = {
 fullStory: 'fullStory',
 user: 'user'
};
controllers.on(events.fullStory, function (id) {
 var query = new Parse.Query(Steps),
 steps;
 query.equalTo("story", id);
 steps = query.collection();
 steps.fetch({
 success: function () {
 new App.Views.Steps({ collection: steps });
 },
 error: Util.error("Error loading story.")
 }
 });
});
controllers.on(events.fullStory, function (id) {
 var title = new Story({ objectId: id });
 title.fetch({
 success: function(model, resp) {
 var idUser;
 new App.Views.Title({ model: title });
 idUser = title.toJSON().idUser;
 controllers.trigger(events.user, idUser);
 },
 error: Util.error('Could not find that story.')
 });
});
controllers.on(events.user, function (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: Util.error('Could not find the user you requested.')
 });
});
App.Controllers.Documents = Backbone.Router.extend({
 routes: {
 "story/:id" : "fullStory",
 "" : "index"
 },
 fullStory: function (id) {
 controllers.trigger(events.fullStory, id);
 }
});

• Maroshii: I know that function is annoying, that actually why I posted the question lol. I'm not sure how to go about rendering one view with two models since they have relations. I need to look more into this. Thanks for the answer! +1