<!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>