Behaviour abstraction system for backbone.js

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>

// Empty model
      var Model = Backbone.Model.extend({  })

// Fairly standard view, other than serialize.
      // Renders model state to an underscore template.
      var View = Backbone.View.extend({
        template: _.template($('#form-template').text()),

render: function () {
          this.el.html(this.template(this.model.attributes))
        },

// Serialize form data and convert
        // it to a usable property list.
        serialize: function () {
          var a = this.el.find('form').serializeArray()
          return _.reduce(a, function (m, v) {
            m[v.name] = v.value
            return m
          }, {})
        }
      })

// Here's the neat stuff; defining behaviours.
      // How does the model react and how does the view react?
      // JQuery.delegate is very handy for live view events.
      var LiveForm = Backbone.Behaviour.extend({
        initialize: function () {
          var self = this

// Listen for change events on existing or future elements.
          this.view.el.delegate('input,textarea,select', 'keyup', function () {
            self.model.set(self.view.serialize())
          })

// Bind will attempt to bind on model.
          // Will fail silently if no model supplied.
          this.model.bind('change', function (model) {
            data = model.toJSON()

_(data).each(function (val, key) {
              self.view.el.find('[name='+key+']').val(val)
            })
          })
        }
      })

// Just some dummy data
      var data = {
        foo: 'bar',
        text: 'Some text',
        seconds: 0
      }

// Expose stuff
      window.App = {}
      App.model = new Model(data)
      App.view = new View({ el: $('#container') })
      App.liveform = new LiveForm(App)

// Increment seconds value
      setInterval(function () {
        data.seconds++
        data.seconds > 20 && (data.seconds = 0)
        App.model.set(data)
      }, 1000)

})
    </script>

<script type="text/template" id="form-template">
      <form>
        <label>Foo: 
          <input type="text" name="foo" value="<%= foo %>" />
        </label>
        <label>Text:
          <textarea name="text"><%= text %></textarea>
        </label>
        <label>Seconds: 
          <select name="seconds">
            <% _.each(_.range(20), function (i) { %>
              <option value="<%= i %>"<% i === seconds ? ' selected="selected"' : ''; %>><%= i %></option>
            <% }); %>
          </select>
        </label>
      </form>
    </script>

Modified http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js