<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Views in Backbone Js</title>
</head>
<body>
<!-- Adding required Libraries -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
<script src="http://backbonejs.org/backbone-min.js" type="text/javascript"></script>
<!-- HTML Code -->
<div id="container">
<input id="name-text-box" placeholder="Enter your name" autofocus>
<h1>Hello <span id="greeting-text"></span>!</h1>
</div>
<!-- Javascript Code -->
<script type="text/javascript">
var SimpleView = Backbone.View.extend({
// el - stands for element. Every view has a element associate in with HTML content will be rendered.
el: '#container',
// Binding keyup event with input box for change element dynamically
events: {
'keyup #name-text-box': 'changeName'
},
// The first function called when this view is instantiated.
initialize: function(){
console.log('Initializing SimpleView');
},
changeName: function(e){
if(e.charCode == 13){return};
this.$('#greeting-text').html($('#name-text-box').val());
}
});
// Initializing Backbone View to show on screen
var simpleView = new SimpleView();
</script>
</body>
</html>
// Code goes here
/* Styles go here */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Views in Backbone Js</title>
</head>
<body>
<!-- Adding required Libraries -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
<script src="http://backbonejs.org/backbone-min.js" type="text/javascript"></script>
<!-- HTML Code -->
<div id="container">
<input id="name-text-box" placeholder="Enter your name" autofocus>
<h1>Hello <span id="greeting-text"></span>!</h1>
</div>
<!-- Javascript Code -->
<script type="text/javascript">
var SimpleView = Backbone.View.extend({
// el - stands for element. Every view has a element associate in with HTML content will be rendered.
el: '#container',
// Binding keyup event with input box for change element dynamically
events: {
'keyup #name-text-box': 'changeName'
},
// The first function called when this view is instantiated.
initialize: function(){
console.log('Initializing SimpleView');
},
changeName: function(e){
if(e.charCode == 13){return};
this.$('#greeting-text').html($('#name-text-box').val());
}
});
// Initializing Backbone View to show on screen
var simpleView = new SimpleView();
</script>
</body>
</html>