Question

I hope you are all well!

A question for an app that uses Backbone.js and node.js.
I’m in a situation where I want to create a model, and then automatically go to a different uri that is constructed using the newly created model :

MessageView = Backbone.View.extend({
  events : {
    'click #button' : 'go here'
  }
  go here : function(model) {
    var message = new Message({model : model)};
    var id = message.get('id');
    // go to uri '/messages/id'

Now I have set up my app using Express, and so I would like to have a real GET request to the server here invoking the data from the newly created model. So I would like to load the page and not just change the view.
One way to do this (I think) would be to just have

window.location = 'messages/'+id;

as the last line above, but I seem to have the impression this is not good practice for Backbone in general.
Otherwise, could just create the message model inside of the render method, and then write its id directly into the href of the button when the view is rendered, but this also seems messy :

render : function() {
  var message = new Message({model : model)};
  var id = message.get('id');
  $('a #button').attr('href', '/messages/'+id);
}

Any ideas on how I could set this up in a more elegant way? Thanks in advance!

Answer 1

Are you sure you want to actually change the browser page to a new window location? Doing that will cause all your javascript and everything else to have to reload. if you need to invoke a GET to the server to get the information for that model id, you just need to call fetch on a model with an id attribute.

From the little code you have here, this may be more along the lines of what you’re trying to do:

MessageView = Backbone.View.extend({
  events : {
     'click #button' : 'go_here'
  },

  go_here : function(model) {
     //myID is the id of your message you want to get from the server
     //I'll leave it up to you on how you get the id of what you 
     //want from that button

     //I'll also assume that you have a router setup somewhere
     //to handle navigation
     MyApp.MyRouter.navigate("messages/"+id, {trigger: true});
  }
});

Then, in your router you’d have a route setup to watch for that:

routes: {
    "messages/:id" : "showMessage"
}

And in your showMessage function:

showMessage: function(id) {
    var message = new Message({id: id});
    message.fetch({success: function(model) {
        //render view of for the message to be shown
        var messageView = new MessageView({model: model});
        messageView.render();
    });
}

When you create the view this way, it will be created with a model that already has all the data for your message in its attributes.