Question

I am building a small app that uses backbone.js on the client side, node.js/socket.io on the server side, and the connection goes trough websockets only.

Now how would I make my setup if I want to get the template and the data at once.

1. I do a fetch() in the router, which gets the data and the template. With this I construct my view -> collection -> model.

2. I do a fetch() in the view itself. (Maybe in the initialize)

===

I want to extend this problem with the following.

Let’s say a user browses to http://mysite.com/products and the user is not logged in yet, he is not allowed to view the page. He has to be rerouted to /login.

The problem is I can only verify this on the server, so the server has to send back the correct data whether the user is logged in or not, and backbone.js has to deal with this.

Summarized:
I make a fetch to the server which will send back data + template html.

Backbone.js has to render the template with the data,

or reroute (Backbone.history.navigate('login', {trigger: true})) when the server sends back a flag.

Answer 1

You could use parse method in your Backbone collection for example :

Collections.Products = Backbone.Collection.extend({

     url : '/products',

     parse : function (response) {
          //
          // you should return JSON from your server and the object must be smth like
          // { template : "<p>template for products</p>", data : productsInJSON }
          //
          if ( response.template && response.data ) {
               this.trigger('template', response.template);
               return response.data;
          } else {
               return response;
          }
     }
});

Views.Page = Backbone.View.extend({

     initialize : function () {
          _.bind(this, 'render');

          var self = this;

          this.collection = new Collections.Products();
          this.collection.on('template', function(template) { 
               self.render(template);
          });
     },

     render: function(template) {
          $("div#page").html(template);
     }

});

$(function() {
    window.app = {};

    window.app.view = new Views.Page();

    // here you are sending {template:true} to '/products' in your server
    window.app.view.collection.fetch( { data : { template : true } } );

});

If you are using socket.io, you should create a new Backbone.sync method for your requests.

It is a little bit out of the Backbone philosophy and the integrated GET, PUT, POST, DELETE methods, so there will be a lot of coding.

You could send a template for unlogged in users with no data for the collection.