1
\$\begingroup\$

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()));
  }
});
\$\endgroup\$
  • \$\begingroup\$ Why is title inside the response from steps.fetch? \$\endgroup\$ – Bill Barry Jul 5 '12 at 13:32
  • \$\begingroup\$ Does fetch return a Promise-like object? \$\endgroup\$ – Bill Barry Jul 5 '12 at 14:04
  • \$\begingroup\$ I'm not sure how to go about rendering one view with two models since they have relations. \$\endgroup\$ – Maroshii Jul 5 '12 at 14:14
1
\$\begingroup\$

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);
    }
});
\$\endgroup\$
  • \$\begingroup\$ 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 \$\endgroup\$ – Maroshii Jul 5 '12 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.