Manual Data binding in Backbone.js

Simple example of how to do manual Data binding in Backbone.js

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
  
  <h1>Manual Data binding in Backbone.js</h1>     
  <p>Enter a name in the input below</p>  
  <div id="message-container">
    <input id="name"/>
    <br />
    <span id="message"></span>
  </div>
    
  <script type="text/template" id="message-template">
     Welcome to Backbone  <%=name%>
  </script>

SCSS

body { margin: 30px;}
body {font-family: Arial;}
h1{font-weight:bold;font-size:16px;}
p{margin:5px 0px 5px 0px;}

JavaScript

var MessageView = Backbone.View.extend({
    template: _.template($('#message-template').html()),    
    events: {
      'keyup #name': 'updateModel'
    },
    updateModel: function(event) {      
      this.model.set({name:$("#name").val()});      
    },
    initialize: function() {      
      this.listenTo(this.model, "change", this.render);       
      this.render();
    },
    render: function() {
        this.$('#message').html(this.template(this.model.toJSON()));
      return this;
    }
  });
   
  var person = new Backbone.Model({name:'dfsd'});
  messageView = new MessageView({el:   $('#name') ,model: person});