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.
I Wonder 