Manual Data binding in Backbone.js

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

by cmckeachie

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: ''
  });
  messageView = new MessageView({
      el: $('#message-container'),
      model: person
  });