Backbone.js: MVC framework for Javascript – Views

In the previous post, we saw Routers of Backbone. Views as name suggests give views to your page, form whatever. In a single page application, each page has a view and they in result have multiple form views eg- one for login, one for home, one for landing page. How it is done?

As we have seen in the routers we created a single page (http;//yourwebsiteurl/) and it had three views default, loginpage, loginuser. We are going to take advantage of the router and will create views for each of them

Requirement: Backbone.js ( + Underscore.js ), jQuery.js ( latest )

Usage:

Consider the html below the body of a html page which we are using, default-view, userpage-view, userlogin-view.

<html>
<!--  Remember the order of the scripts. We will describe the the contents of default.js in next post while summing up the example. Right now example wont work, that is, all the views will be displayed-->
     <script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript" src="underscore.js"></script>
     <script type="text/javascript" src="backbone.js"></script>
     <script type="text/javascript" src="view.js"></script>
     <script type="text/javascript" src="router.js"></script><!-- Router we explained in the previous post is used-->
     <!-- script type="text/javascript" src="default.js"></script -->

     <body>
         <div id="default-view">
               <input id="loginpage" type="button" value="Login Page" />
         </div>
         <div id="loginpage-view">
               <input id="email" type="text" name="email" /><input id="login" type="button" value="Login" />
         </div>
         <div id="loginuser-view"></div>
    </body>
</html>

Contents of view.js

var pageview = Backbone.View.extend({  //Creating the view by extending backbone.

    el: $(document), //it is not playing role in this example as we are creating multiple views. if in case we were implementing let say loginuser view only, we would have set it $('#loginuser').

    events: { //events that we needs to bind, here click on buttons is used.
        'click input#loginpage': 'loginpage',
        'click input#login': 'loginuser'
    },

    initialize: function(){   //this is called when an object of view is created.
        _.bindAll(this, 'render', 'loginpage', 'loginuser', 'loginpageview', 'loginuserview');  //binds all the function that we to the view(pageview) object
       // this.model = new loginModel();  //comment it as we are not implementing model
        this.render();   //render function will be called, it is sort of convention to use it to show default view. not necessary always.
    },

    render: function(){ //default view
        $('#loginuser-view').hide();
        $('#loginpage-view').hide();
        $('#default-view').show();
    },

    loginpage: function(){ //when Login Page button is clicked this function is called which we bound in events.
//Your pre processing of data if any.
        window.location.href = 'http://yourwebsiteurl/#/loginpage';
    },

    loginuser: function(){ //when login button is clicked this function is called which we bound in events.
//Your pre processing of data if any. Generally model is used here. In this case when you will get email and password use model to check if the user is valid. Then perform resultant action.
    	var email = $('#email').val();
    	window.location.href = 'http://yourwebsiteurl/#/loginuser/'+email;
    },

    loginpageview: function(){
//This function will display the contents of loginpage view.
    	$('#default-view').hide();
        $('#loginuser-view').hide();
        $('#loginpage-view').show();
    },

    loginuserview: function(email){
/* Resultant of the login action is this view. This is just for the sake of explaining views. */
        $('#default-view').hide();
        $('#loginpage-view').hide();
/*some action here to retrieve the view of logged in user, most probably from database */
	$('#loginuser-view').text('Hi '+email);
        $('#loginuser-view').show();
    }
});

Explanation:

Everything is explained in the comments. We are left with only connecting router with view, which will be the content of “default.js”. In the next post over simple working backbone backed application will be ready (minus model). Hope I have managed to make you understand backbone.

Advertisements

Backbone.js: MVC framework for Javascript – Routers

In the previous post, we saw Models of Backbone. We will see about Router in this post.

Router provides method for routing client side pages. Pages using REST API have multiple views on one page and are displayed as a result of some action. Like you have one view of login and other of home page. So when you login the view of the page changes and it displays your home page. Router helps to keep url tidy and makes easy to perform action accordingly. Lets take a look at example.

A normal web application.

URL for signup page: http://example.com/signup.php

URL for home page: http://example.com/home.php?u=1234

Single page web application.

URL for signup page: http://example.com#/singup

URL for home page: http://example.com#/home/1234

Requirement: Backbone.js (+Underscore.js),  jquery.js (latest)

Using:

Contents of router.js

//Router is created using Router of Backbone.
var route = Backbone.Router.extend({
//initialize is called when we will create a route object. pageview is the view of the page which will be created in next post
 initialize: function(pageview){
//We store the views so that it is not called everytime the url changes.
 this.view = pageview;
 },
//routes are the link with respect to the default url, we want to implement.
 routes:{
 'loginpage': 'loginpage', //http://yourwebsiteurl/#/loginpage
 'loginuser/:email': 'loginuser', //:email is the variable which is analogous to get method, which backbone matches by itself.
 '': 'index' //http://yourwebsiteurl/
 },

 loginpage: function(){
//Whenever we land on the url using loginpage its view must be called.
 this.view.loginpageview();
 },

 loginuser: function(email){ // matched :email from  url can be taken in variable(like email in our case) in this function.
//Whenever we land on the url using loginuser its view must be called. We can store multiple views and call them as required.
 this.view.loginuserview(email);
 },

 index: function(){
//by default this is called as we have marked.
 this.view.render();
 }
});

Explanation:

Everything is explained in comments. We will use this router.js in our next post on views.