Backbone.js tutorial - Simple example of backbone.js view
Wednesday, June 11, 2014
Backbone views are almost more convention than they are code — they don't determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library.
Simple working example of backbone.js view
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Just backbone view & render</title>
</head>
<body>
// Include libraries like jQuery, underscore.js & backbone-min.js. Since Backbone has a hard dependency on Underscore.js, you are able to utilize many Underscore.js methods to interact with Collections.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
// A simple script to render the paragraph html tag inside the body element
<script>
(function($){
var MyView = Backbone.View.extend({
el: $('body'),
initialize: function(){
this.render();
},
render: function(){
$(this.el).append("<p>Hello welcome to Backbone view & render</p>");
}
});
// View object creation and initialize function will be called at the time of object creation.
var myView = new MyView();
})(jQuery);
</script>
</body>
</html>
Download the example from Github
Simple working example of backbone.js view
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Just backbone view & render</title>
</head>
<body>
// Include libraries like jQuery, underscore.js & backbone-min.js. Since Backbone has a hard dependency on Underscore.js, you are able to utilize many Underscore.js methods to interact with Collections.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
// A simple script to render the paragraph html tag inside the body element
<script>
(function($){
var MyView = Backbone.View.extend({
el: $('body'),
initialize: function(){
this.render();
},
render: function(){
$(this.el).append("<p>Hello welcome to Backbone view & render</p>");
}
});
// View object creation and initialize function will be called at the time of object creation.
var myView = new MyView();
})(jQuery);
</script>
</body>
</html>
Download the example from Github
0 comments