I'm here again with am small yet useful Hello World example of BackboneJs.
I love to explore and play with various JavaScript Frameworks, JQuery & Zepto being my preferred ones for web as well as phonegap apps I still love prototype and now it was time to experiment with something new and so I tried my hands on BackboneJs and here s the one example I have developed by Goggling and surfing the web.
Well Backbone attracted myself as I love creating single page web application and in such page organization of the code plays the key role and a lot of chances code becomes messy if more then one developer is involved and then spend hours reformatting the code etc.
Here I felt that Backbone would help! As it provides a proper structural way to organize your code.
The following example, I have avoided using CSS as I just wanted to show the functionality of BackboneJs,
your web page is divided into 3 sections,
1. Your HTML UI
2. Included JS libs i.e. Backbone uses jquery, underscore and backbone js
3. JavaScript i.e. your actual BackboneJS code goes here...you can always opt using a separate js file for the same.
Screens For The Example As Follows,
 |
| Fig. 1 Displays Simple Greet Screen |
 |
| Fig. 2 Displays Alert When Clicked On Greet User Button |
Code For The Example Is As Follows:
<html>
<head><title>Greet User</title></head>
<body>
<!-- HTML UI -->
<div id="greet_display">Loading...</div>
<div id='InputUI'> <br>
Name: <input type="text" name="hello_user" /> <br>
<br><button>Greet User</button>
</div>
<!-- Libraries -->
<script src="http:jquery.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="backbone-min.js" type="text/javascript"></script>
<!-- JAVA SCRIPT -->
<script type="text/javascript">
var AppView = Backbone.View.extend({
el: '#greet_display',
initialize: function(){
this.render();
},
render: function(){
this.$el.html("BackboneJS Greet User Example");
}
});
var appView = new AppView();
var UserInputView = Backbone.View.extend({
el : '#InputUI',
initialize : function() {
this.render();
},
events : {
'click button' : 'sayHii'
},
sayHii : function(e) {
alert("Hii "+this.$('input').val() + " !! Welcome To BackboneJS");
}
});
var userInputView = new UserInputView();
</script>
</body>
</html>
In the first Section i.e. HTML UI consists of the first div which displays the title (which is populated in the js section) and then the second div which has the text input where user can enter the name and then a button where the click event is added (in js section), on click of the same an Alert will be displayed for Greeting the user.
In the JS section, we need to create the backbone js views corresponding to the HTML UI views.
So we have 2 views in JS first view is AppView which is used to populate the title and the second view which has the text input and the button.
Notice the click event attached on the button where its corresponding function is defined which displays the welcome message along with the user input name.
I hope this example is useful for the people looking for hello world sample for backbone js.
Thats all for now,
Happy Coding!!
~Mayuri
No comments:
Post a Comment