$(function() {
    var WidgetDefinition = Backbone.Model.extend({
        defaults: {
            'name': 'new widget',
            'description': 'this is a new widget',
            'dimensions': 1,
            'source': '{}'
        },
        url: 'ws/widget-definition/'
    });

    var WidgetDefinitionList = Backbone.Collection.extend({
        model: WidgetDefinition,
        url: 'ws/widget-definition/'
    });
    //var WidgetDefinitions = new WidgetDefinitionList();

    var WidgetLibraryView = Backbone.View.extend({
        el: $('#widget-library'),
        template: _.template($('#widget-library-tpl').html()),

        events: {
            'click li a': 'loadWidgetDefinition',
        },

        render: function() {
            var view = this;
            view.collection.fetch({success: function() {
                view.$el.html(view.template({models: view.collection.toJSON()}));
            }});
            return view;
        },

        loadWidgetDefinition: function(e) {
            var id = e.target.hash.substr(1);
            var model = this.collection.get(id);

            var widget_editor = new WidgetDefinitionView({
                model: model
            });
            widget_editor.render();
        }
    });

    var WidgetDefinitionView = Backbone.View.extend({
        el: $('#widget-editor'),
        template: _.template($('#widget-editor-tpl').html()),

        events: {
            'click input[type="button"][value="save"]': 'save'
            //'click input[type="button"][value="delete"]': 'delete'
        },

        render: function() {
            this.$el.html(this.template({model: this.model}));
            return this;
        },

        save: function() {
            var data = {};
            $('form :input', this.$el).each(function(i, e) {
                var $e = $(e);
                if ($e.attr('name'))
                    data[$e.attr('name')] = $e.val();
            });

            this.model.save(data);
        }
    });

    var widget_library = new WidgetLibraryView({
        collection: new WidgetDefinitionList()
    });
    widget_library.render();

    var widget_editor = new WidgetDefinitionView({
        model: new WidgetDefinition()
    });
    widget_editor.render();
});

@@ -268,33 +268,32 @@
 ition/'%0A    %7D);%0A
-%0A
     var WidgetDe
@@ -417,66 +417,8 @@
  %7D);
-%0A    //var WidgetDefinitions = new WidgetDefinitionList();
 %0A%0A  
@@ -1354,32 +1354,75 @@
       events: %7B%0A
+            'change input': 'updateModel',%0A
             'cli
@@ -1686,20 +1686,27 @@
         
-save
+updateModel
 : functi
@@ -1700,32 +1700,33 @@
 Model: function(
+e
 ) %7B%0A            
@@ -1733,175 +1733,65 @@
 var 
-data = %7B%7D;%0A            $('form :input', this.$el).each(function(i, e) %7B%0A                var $e = $(e);%0A                if ($e.attr('name'))%0A                    data%5B$e
+$target = $(e.target);%0A            this.model.set($target
 .att
@@ -1803,38 +1803,64 @@
 me')
-%5D = $e
+, $target
 .val()
+)
 ;%0A     
+ 
+  %7D,%0A%0A
        
-%7D);%0A
+ save: function() %7B
 %0A   
@@ -1888,12 +1888,8 @@
 ave(
-data
 );%0A 

use events to update model from view