Backbone

json response from server

{
"u_id": "1",
"username": "techhahn",
"first_name": "Pritesh",
"last_name": "Panjiker",
"user_email": "priteshpanjiker@gmail.com",
"user_photo": null,
"subscription": null,
"time": "2013-01-24 11:43:20",
"genre": null
}

template

<div class="" id="profile">
          <div class="well clearfix">
            <div class="btn-group btn-group-vertical pull-right">
            <button class="btn">Edit Proflie <span class="icon-pencil"></span></button>
            <button class="btn">Followers <span class="icon-group"></span></button>
            <button class="btn">Settings <span class="icon-cog"></span></button>
            <button class="btn">Change Avatar <span class="icon-upload"></span></button>
            </div>
            <img src="<%= userImage %>" id="useravatar" class="img-polaroid"  alt="useravatar">
            <h2><%= username %></h2>
            <h2><%= first_name %></h2>
        
           </div>
</div>

The router

require.config({
  paths: {
    jquery: 'lib/jquery',
    backbone: 'lib/backbone',
    underscore: 'lib/underscore',
    user: 'app/models/user'
  },
  shims: {
    'backbone': {
            deps: ['jquery', 'underscore'],
            exports: 'backbone'
        }
  }
})

define(['jquery', 'underscore', 'backbone', 'app/views/UserView', 'app/models/user'], function($, _, backbone, UserView, User){
  console.log('Router Initialized');
  var AppRouter = Backbone.Router.extend({
    routes: {
      // some URL routes
      'dashboard': 'showDashboard',

      'profile': 'showProfile',

      'library': 'showLibrary',

      'notifications': 'showNotifications',

      'messages': 'showMessages',

      // Default
      '*actions': 'defaultAction'
    }
  });

  var initialize = function(){
    var app_router = new AppRouter;

    app_router.on('route:showDashboard', function(actions){
      
      alert('Dashboard Route triggered');
    });

    app_router.on('route:showProfile', function(){
      console.log('profile router');
      var user = new User.User();
      user.fetch();
      
      var userView = new UserView.UserView({model: user});
      userView.render();
    });

    app_router.on('route:showLibrary', function(actions){
      
      alert('Library Route triggered');
    });

    app_router.on('route:defaultAction', function(actions){
      
      alert('No route: ' + actions);
    });

    Backbone.history.start();
  };

  return {
    initialize: initialize
  };
});

User Model

define(['backbone'], function(backbone) {
	console.log('User model initialized');
	var 
	User = Backbone.Model.extend({
		urlRoot : '/user_API',
		defaults: {
			username: '',
			first_name: '',
			last_name: '',
			user_emaill: '',
			user_photo: '/assets/img/defuser.jpg'
		},
		userImage: function() {
			return "/assets/img/" + this.model.get('user_photo');
		},
		fullName: function() {
			return this.model.get('first_name') + ' ' + this.model.get('last_name');
		}

	});

	return {
		User: User
	}
})

	return {
		User: User
	}
})

User View

require.config({
  paths: {
    jquery: 'lib/jquery',
    backbone: 'lib/backbone',
    underscore: 'lib/underscore',
    user: 'app/models/user'
  },
  shims: {
    'backbone': {
            deps: ['jquery', 'underscore'],
            exports: 'backbone'
        }
  }
})
define(['jquery', 'underscore', 'backbone', 'text!templates/profile.html'], function($, _, backbone, profileTemplate) {
  var UserView = Backbone.View.extend({
		el: $('#renderarea'),
		initialize: function() {
			_.bindAll(this);
		},
		

		render: function() {

	      this.$el.html(_.template(profileTemplate, this.model.toJSON()))
	      console.log(this.model.toJSON())
	      return this;
		}
	})

	return {
		UserView: UserView
	}
})