Removed require.js scheme since it forces async event driven model,

this model does not work with the comm/widget communication model.
We need to be able to load the dependencies before we send the
show() message to the widget manager.  Otherwise a race condition
will exist where the widget manager may recieve the show message
before the dependencies have been loaded (happened almost every time).

IPython/html/static/notebook/js/widget.js

@@ -15,243 +15,239 b''
  * @submodule widget
  */
 
-
 "use strict";
 
 // Only run once on a notebook.
-require(["components/underscore/underscore-min", 
-         "components/backbone/backbone-min"], function () {
-    if (IPython.notebook.widget_manager == undefined) {
-
-        //-----------------------------------------------------------------------
-        // WidgetModel class
-        //-----------------------------------------------------------------------
-        var WidgetModel = Backbone.Model.extend({
-            apply: function(sender) {
-                this.save();
-
-                for (var index in this.views) {
-                    var view = this.views[index];
-                    if (view !== sender) {
-                        view.refresh();    
-                    }
+if (IPython.notebook.widget_manager == undefined) {
+
+    //-----------------------------------------------------------------------
+    // WidgetModel class
+    //-----------------------------------------------------------------------
+    var WidgetModel = Backbone.Model.extend({
+        apply: function(sender) {
+            this.save();
+
+            for (var index in this.views) {
+                var view = this.views[index];
+                if (view !== sender) {
+                    view.refresh();    
                 }
             }
-        });
-
-
-        //-----------------------------------------------------------------------
-        // WidgetView class
-        //-----------------------------------------------------------------------
-        var WidgetView = Backbone.View.extend({
-            
-            initialize: function() {
-                this.model.on('change',this.refresh,this);
-            },
+        }
+    });
+
+
+    //-----------------------------------------------------------------------
+    // WidgetView class
+    //-----------------------------------------------------------------------
+    var WidgetView = Backbone.View.extend({
+        
+        initialize: function() {
+            this.model.on('change',this.refresh,this);
+        },
+        
+        refresh: function() {
+            this.update();
             
-            refresh: function() {
-                this.update();
-                
-                if (this.model.css != undefined) {
-                    for (var selector in this.model.css) {
-                        if (this.model.css.hasOwnProperty(selector)) {
-                            
-                            // Get the elements via the css selector.  If the selector is
-                            // blank, assume the current element is the target.
-                            var elements = this.$el.find(selector);
-                            if (selector=='') {
-                                elements = this.$el;
-                            }
-                            
-                            // Apply the css traits to all elements that match the selector.
-                            if (elements.length>0){
-                                var css_traits = this.model.css[selector];    
-                                for (var css_key in css_traits) {
-                                    if (css_traits.hasOwnProperty(css_key)) {
-                                        elements.css(css_key, css_traits[css_key]);
-                                    }
+            if (this.model.css != undefined) {
+                for (var selector in this.model.css) {
+                    if (this.model.css.hasOwnProperty(selector)) {
+                        
+                        // Get the elements via the css selector.  If the selector is
+                        // blank, assume the current element is the target.
+                        var elements = this.$el.find(selector);
+                        if (selector=='') {
+                            elements = this.$el;
+                        }
+                        
+                        // Apply the css traits to all elements that match the selector.
+                        if (elements.length>0){
+                            var css_traits = this.model.css[selector];    
+                            for (var css_key in css_traits) {
+                                if (css_traits.hasOwnProperty(css_key)) {
+                                    elements.css(css_key, css_traits[css_key]);
                                 }
                             }
                         }
                     }
                 }
-            },
-        });
+            }
+        },
+    });
+
+
+    //-----------------------------------------------------------------------
+    // WidgetManager class
+    //-----------------------------------------------------------------------
+    // Public constructor
+    var WidgetManager = function(comm_manager){
+        this.comm_manager = comm_manager;
+        this.widget_model_types = {};
+        this.widget_view_types = {};
+        this.model_widget_views = {};
+        
+        var that = this;
+        Backbone.sync = function(method, model, options, error) {
+            var result = that.send_sync(method, model);
+            if (options.success) {
+              options.success(result);
+            }
+        }; 
+    }
 
+    // Register a widget model type.
+    WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
+        
+        // Register the widget with the comm manager.  Make sure to pass this object's context
+        // in so `this` works in the call back.
+        this.comm_manager.register_target(widget_model_name, $.proxy(this.handle_com_open, this));
+        
+        // Register the types of the model and view correspong to this widget type.  Later
+        // the widget manager will initialize these when the comm is opened.
+        this.widget_model_types[widget_model_name] = widget_model_type;
+    }
 
-        //-----------------------------------------------------------------------
-        // WidgetManager class
-        //-----------------------------------------------------------------------
-        // Public constructor
-        var WidgetManager = function(comm_manager){
-            this.comm_manager = comm_manager;
-            this.widget_model_types = {};
-            this.widget_view_types = {};
-            this.model_widget_views = {};
-            
-            var that = this;
-            Backbone.sync = function(method, model, options, error) {
-                var result = that.send_sync(method, model);
-                if (options.success) {
-                  options.success(result);
-                }
-            }; 
-        }
+    // Register a widget view type.
+    WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
+        this.widget_view_types[widget_view_name] = widget_view_type;
+    }
 
-        // Register a widget model type.
-        WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
-            
-            // Register the widget with the comm manager.  Make sure to pass this object's context
-            // in so `this` works in the call back.
-            this.comm_manager.register_target(widget_model_name, $.proxy(this.handle_com_open, this));
-            
-            // Register the types of the model and view correspong to this widget type.  Later
-            // the widget manager will initialize these when the comm is opened.
-            this.widget_model_types[widget_model_name] = widget_model_type;
-        }
+    // Handle when a comm is opened.
+    WidgetManager.prototype.handle_com_open = function (comm, msg) {
+        var widget_type_name = msg.content.target_name;
+        
+        // Create the corresponding widget model.
+        var widget_model = new this.widget_model_types[widget_type_name];
 
-        // Register a widget view type.
-        WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
-            this.widget_view_types[widget_view_name] = widget_view_type;
-        }
+        // Remember comm associated with the model.
+        widget_model.comm = comm;
+        comm.model = widget_model;
 
-        // Handle when a comm is opened.
-        WidgetManager.prototype.handle_com_open = function (comm, msg) {
-            var widget_type_name = msg.content.target_name;
-            
-            // Create the corresponding widget model.
-            var widget_model = new this.widget_model_types[widget_type_name];
+        // Create an array to remember the views associated with the model.
+        widget_model.views = [];
 
-            // Remember comm associated with the model.
-            widget_model.comm = comm;
-            comm.model = widget_model;
+        // Add a handle to delete the control when the comm is closed.
+        var that = this;
+        var handle_close = function(msg) {
+            that.handle_comm_closed(comm, msg);
+        }
+        comm.on_close(handle_close);
 
-            // Create an array to remember the views associated with the model.
-            widget_model.views = [];
+        // Handle incomming messages.
+        var handle_msg = function(msg) {
+            that.handle_comm_msg(comm, msg);
+        }
+        comm.on_msg(handle_msg);
+    }
 
-            // Add a handle to delete the control when the comm is closed.
-            var that = this;
-            var handle_close = function(msg) {
-                that.handle_comm_closed(comm, msg);
+    // Create view that represents the model.
+    WidgetManager.prototype.show_view = function (widget_area, widget_model, widget_view_name) {
+        var widget_view = new this.widget_view_types[widget_view_name]({model: widget_model});
+        widget_view.render();
+        widget_model.views.push(widget_view);
+
+        // Handle when the view element is remove from the page.
+        widget_view.$el.on("remove", function(){ 
+            var index = widget_model.views.indexOf(widget_view);
+            if (index > -1) {
+                widget_model.views.splice(index, 1);
             }
-            comm.on_close(handle_close);
+            widget_view.remove(); // Clean-up view 
 
-            // Handle incomming messages.
-            var handle_msg = function(msg) {
-                that.handle_comm_msg(comm, msg);
+            // Close the comm if there are no views left.
+            if (widget_model.views.length()==0) {
+                widget_model.comm.close();     
             }
-            comm.on_msg(handle_msg);
-        }
-
-        // Create view that represents the model.
-        WidgetManager.prototype.show_view = function (widget_area, widget_model, widget_view_name) {
-            var widget_view = new this.widget_view_types[widget_view_name]({model: widget_model});
-            widget_view.render();
-            widget_model.views.push(widget_view);
-
-            // Handle when the view element is remove from the page.
-            widget_view.$el.on("remove", function(){ 
-                var index = widget_model.views.indexOf(widget_view);
-                if (index > -1) {
-                    widget_model.views.splice(index, 1);
-                }
-                widget_view.remove(); // Clean-up view 
-
-                // Close the comm if there are no views left.
-                if (widget_model.views.length()==0) {
-                    widget_model.comm.close();     
-                }
-            });
+        });
 
-            // Add the view's element to cell's widget div.
-            widget_area
-                .append($("<div />").append(widget_view.$el))
-                .parent().show(); // Show the widget_area (parent of widget_subarea)
+        // Add the view's element to cell's widget div.
+        widget_area
+            .append($("<div />").append(widget_view.$el))
+            .parent().show(); // Show the widget_area (parent of widget_subarea)
 
-            // Update the view based on the model contents.
-            widget_view.refresh();
-        }
+        // Update the view based on the model contents.
+        widget_view.refresh();
+    }
 
-        // Handle incomming comm msg.
-        WidgetManager.prototype.handle_comm_msg = function (comm, msg) {
-            // Different logic for different methods.
-            var method = msg.content.data.method;
-            switch (method){
-                case 'show':
-
-                    // TODO: Get cell from registered output handler.
-                    var cell = IPython.notebook.get_cell(IPython.notebook.get_selected_index()-1);
-                    var widget_subarea = cell.element.find('.widget_area').find('.widget_subarea');
-
-                    if (msg.content.data.parent != undefined) {
-                        var find_results = widget_subarea.find("." + msg.content.data.parent);
-                        if (find_results.length > 0) {
-                            widget_subarea = find_results;
-                        }
+    // Handle incomming comm msg.
+    WidgetManager.prototype.handle_comm_msg = function (comm, msg) {
+        // Different logic for different methods.
+        var method = msg.content.data.method;
+        switch (method){
+            case 'show':
+
+                // TODO: Get cell from registered output handler.
+                var cell = IPython.notebook.get_cell(IPython.notebook.get_selected_index()-1);
+                var widget_subarea = cell.element.find('.widget_area').find('.widget_subarea');
+
+                if (msg.content.data.parent != undefined) {
+                    var find_results = widget_subarea.find("." + msg.content.data.parent);
+                    if (find_results.length > 0) {
+                        widget_subarea = find_results;
                     }
+                }
 
-                    this.show_view(widget_subarea, comm.model, msg.content.data.view_name);
-                    break;
-                case 'update':
-                    this.handle_update(comm, msg.content.data.state);
-                    break;
-            }
+                this.show_view(widget_subarea, comm.model, msg.content.data.view_name);
+                break;
+            case 'update':
+                this.handle_update(comm, msg.content.data.state);
+                break;
         }
+    }
 
-        // Handle when a widget is updated via the python side.
-        WidgetManager.prototype.handle_update = function (comm, state) {
-            for (var key in state) {
-                if (state.hasOwnProperty(key)) {
-                    if (key=="_css"){
-                        comm.model.css = state[key];
-                    } else {
-                        comm.model.set(key, state[key]); 
-                    }
+    // Handle when a widget is updated via the python side.
+    WidgetManager.prototype.handle_update = function (comm, state) {
+        for (var key in state) {
+            if (state.hasOwnProperty(key)) {
+                if (key=="_css"){
+                    comm.model.css = state[key];
+                } else {
+                    comm.model.set(key, state[key]); 
                 }
             }
-            comm.model.save();
         }
+        comm.model.save();
+    }
 
-        // Handle when a widget is closed.
-        WidgetManager.prototype.handle_comm_closed = function (comm, msg) {
-            for (var view_index in comm.model.views) {
-                var view = comm.model.views[view_index];
-                view.remove();
-            }
+    // Handle when a widget is closed.
+    WidgetManager.prototype.handle_comm_closed = function (comm, msg) {
+        for (var view_index in comm.model.views) {
+            var view = comm.model.views[view_index];
+            view.remove();
         }
+    }
 
-        // Get the cell output area corresponding to the comm.
-        WidgetManager.prototype._get_comm_outputarea = function (comm) {
-            // TODO: get element from comm instead of guessing
-            var cell = IPython.notebook.get_cell(IPython.notebook.get_selected_index())
-            return cell.output_area;
-        }
+    // Get the cell output area corresponding to the comm.
+    WidgetManager.prototype._get_comm_outputarea = function (comm) {
+        // TODO: get element from comm instead of guessing
+        var cell = IPython.notebook.get_cell(IPython.notebook.get_selected_index())
+        return cell.output_area;
+    }
 
-        // Send widget state to python backend.
-        WidgetManager.prototype.send_sync = function (method, model) {
-            
-            // Create a callback for the output if the widget has an output area associate with it.
-            var callbacks = {};
-            var comm = model.comm;
-            var outputarea = this._get_comm_outputarea(comm);
-            if (outputarea != null) {
-                callbacks = {
-                    iopub : {
-                    output : $.proxy(outputarea.handle_output, outputarea),
-                    clear_output : $.proxy(outputarea.handle_clear_output, outputarea)}
-                };
+    // Send widget state to python backend.
+    WidgetManager.prototype.send_sync = function (method, model) {
+        
+        // Create a callback for the output if the widget has an output area associate with it.
+        var callbacks = {};
+        var comm = model.comm;
+        var outputarea = this._get_comm_outputarea(comm);
+        if (outputarea != null) {
+            callbacks = {
+                iopub : {
+                output : $.proxy(outputarea.handle_output, outputarea),
+                clear_output : $.proxy(outputarea.handle_clear_output, outputarea)}
             };
-            var model_json = model.toJSON();
-            var data = {sync_method: method, sync_data: model_json};
-            comm.send(data, callbacks);
-            return model_json;
-        }
+        };
+        var model_json = model.toJSON();
+        var data = {sync_method: method, sync_data: model_json};
+        comm.send(data, callbacks);
+        return model_json;
+    }
 
-        IPython.WidgetManager = WidgetManager;
-        IPython.WidgetModel = WidgetModel;
-        IPython.WidgetView = WidgetView;
+    IPython.WidgetManager = WidgetManager;
+    IPython.WidgetModel = WidgetModel;
+    IPython.WidgetView = WidgetView;
 
-        IPython.notebook.widget_manager = new WidgetManager(IPython.notebook.kernel.comm_manager);    
+    IPython.notebook.widget_manager = new WidgetManager(IPython.notebook.kernel.comm_manager);    
 
-    }
-});
+};

IPython/html/static/notebook/js/widgets/container.js

@@ -1,19 +1,17 b''
-require(["notebook/js/widget"], function () {
-    var ContainerModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('container_widget', ContainerModel);
+var ContainerModel = IPython.WidgetModel.extend({});
+IPython.notebook.widget_manager.register_widget_model('container_widget', ContainerModel);
 
-    var ContainerView = IPython.WidgetView.extend({
-        
-        render : function(){
-            this.$el.html('');
-            this.$container = $('<div />')
-                .addClass('container')
-                .addClass(this.model.comm.comm_id);
-            this.$el.append(this.$container);
-        },
-        
-        update : function(){},
-    });
+var ContainerView = IPython.WidgetView.extend({
+    
+    render : function(){
+        this.$el.html('');
+        this.$container = $('<div />')
+            .addClass('container')
+            .addClass(this.model.comm.comm_id);
+        this.$el.append(this.$container);
+    },
+    
+    update : function(){},
+});
 
-    IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);
-});
  No newline at end of file
+IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);

IPython/html/static/notebook/js/widgets/float_range.js

@@ -1,121 +1,119 b''
-require(["notebook/js/widget"], function () {
-    var FloatRangeWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel);
+var FloatRangeWidgetModel = IPython.WidgetModel.extend({});
+IPython.notebook.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel);
 
-    var FloatSliderView = IPython.WidgetView.extend({
+var FloatSliderView = IPython.WidgetView.extend({
+    
+    // Called when view is rendered.
+    render : function(){
+        this.$el
+            .html('')
+            .addClass(this.model.comm.comm_id);
+        this.$slider = $('<div />')
+                        .slider({})
+                        .addClass('slider');
         
-        // Called when view is rendered.
-        render : function(){
-            this.$el
-                .html('')
-                .addClass(this.model.comm.comm_id);
-            this.$slider = $('<div />')
-                            .slider({})
-                            .addClass('slider');
-            
-            // Put the slider in a container 
-            this.$slider_container = $('<div />')
-                                    .css('padding-top', '4px')
-                                    .css('padding-bottom', '4px')
-                                    .append(this.$slider);    
-            this.$el.append(this.$slider_container);
-            
-            // Set defaults.
-            this.update();
-        },
+        // Put the slider in a container 
+        this.$slider_container = $('<div />')
+                                .css('padding-top', '4px')
+                                .css('padding-bottom', '4px')
+                                .append(this.$slider);    
+        this.$el.append(this.$slider_container);
         
-        // Handles: Backend -> Frontend Sync
-        //          Frontent -> Frontend Sync
-        update : function(){
-            // Slider related keys.
-            var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
-            for (var index in _keys) {
-                var key = _keys[index];
-                if (this.model.get(key) != undefined) {
-                    this.$slider.slider("option", key, this.model.get(key));
-                }
+        // Set defaults.
+        this.update();
+    },
+    
+    // Handles: Backend -> Frontend Sync
+    //          Frontent -> Frontend Sync
+    update : function(){
+        // Slider related keys.
+        var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
+        for (var index in _keys) {
+            var key = _keys[index];
+            if (this.model.get(key) != undefined) {
+                this.$slider.slider("option", key, this.model.get(key));
             }
-        },
-        
-        // Handles: User input
-        events: { "slide" : "handleSliderChange" }, 
-        handleSliderChange: function(e, ui) { 
-            this.model.set('value', ui.value); 
-            this.model.apply(this);
-        },
-    });
+        }
+    },
+    
+    // Handles: User input
+    events: { "slide" : "handleSliderChange" }, 
+    handleSliderChange: function(e, ui) { 
+        this.model.set('value', ui.value); 
+        this.model.apply(this);
+    },
+});
 
-    IPython.notebook.widget_manager.register_widget_view('FloatSliderView', FloatSliderView);
+IPython.notebook.widget_manager.register_widget_view('FloatSliderView', FloatSliderView);
 
 
-    var FloatTextView = IPython.WidgetView.extend({
-        
-        // Called when view is rendered.
-        render : function(){
-            this.$el
-                .html('')
-                .addClass(this.model.comm.comm_id);
-            this.$textbox = $('<input type="text" />')
-                .addClass('input')
-                .appendTo(this.$el);
-            this.update(); // Set defaults.
-        },
-        
-        // Handles: Backend -> Frontend Sync
-        //          Frontent -> Frontend Sync
-        update : function(){
-            var value = this.model.get('value');
-            if (!this.changing && parseFloat(this.$textbox.val()) != value) {
-                this.$textbox.val(value);
-            }
-            
-            if (this.model.get('disabled')) {
-                this.$textbox.attr('disabled','disabled');
-            } else {
-                this.$textbox.removeAttr('disabled');
-            }
-        },
+var FloatTextView = IPython.WidgetView.extend({
+    
+    // Called when view is rendered.
+    render : function(){
+        this.$el
+            .html('')
+            .addClass(this.model.comm.comm_id);
+        this.$textbox = $('<input type="text" />')
+            .addClass('input')
+            .appendTo(this.$el);
+        this.update(); // Set defaults.
+    },
+    
+    // Handles: Backend -> Frontend Sync
+    //          Frontent -> Frontend Sync
+    update : function(){
+        var value = this.model.get('value');
+        if (!this.changing && parseFloat(this.$textbox.val()) != value) {
+            this.$textbox.val(value);
+        }
         
+        if (this.model.get('disabled')) {
+            this.$textbox.attr('disabled','disabled');
+        } else {
+            this.$textbox.removeAttr('disabled');
+        }
+    },
+    
+    
+    events: {"keyup input" : "handleChanging",
+            "paste input" : "handleChanging",
+            "cut input" : "handleChanging",
+            "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
+    
+    // Handles and validates user input.
+    handleChanging: function(e) { 
         
-        events: {"keyup input" : "handleChanging",
-                "paste input" : "handleChanging",
-                "cut input" : "handleChanging",
-                "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
+        // Try to parse value as a float.
+        var numericalValue = 0.0;
+        if (e.target.value != '') {
+            numericalValue = parseFloat(e.target.value);
+        }
         
-        // Handles and validates user input.
-        handleChanging: function(e) { 
-            
-            // Try to parse value as a float.
-            var numericalValue = 0.0;
-            if (e.target.value != '') {
-                numericalValue = parseFloat(e.target.value);
-            }
+        // If parse failed, reset value to value stored in model.
+        if (isNaN(numericalValue)) {
+            e.target.value = this.model.get('value');
+        } else if (!isNaN(numericalValue)) {
+            numericalValue = Math.min(this.model.get('max'), numericalValue);
+            numericalValue = Math.max(this.model.get('min'), numericalValue);
             
-            // If parse failed, reset value to value stored in model.
-            if (isNaN(numericalValue)) {
-                e.target.value = this.model.get('value');
-            } else if (!isNaN(numericalValue)) {
-                numericalValue = Math.min(this.model.get('max'), numericalValue);
-                numericalValue = Math.max(this.model.get('min'), numericalValue);
-                
-                // Apply the value if it has changed.
-                if (numericalValue != this.model.get('value')) {
-                    this.changing = true;
-                    this.model.set('value', numericalValue);
-                    this.model.apply(this);
-                    this.changing = false;
-                }
-            }
-        },
-        
-        // Applies validated input.
-        handleChanged: function(e) { 
-            // Update the textbox
-            if (this.model.get('value') != e.target.value) {
-                e.target.value = this.model.get('value');
+            // Apply the value if it has changed.
+            if (numericalValue != this.model.get('value')) {
+                this.changing = true;
+                this.model.set('value', numericalValue);
+                this.model.apply(this);
+                this.changing = false;
             }
         }
-    });
+    },
+    
+    // Applies validated input.
+    handleChanged: function(e) { 
+        // Update the textbox
+        if (this.model.get('value') != e.target.value) {
+            e.target.value = this.model.get('value');
+        }
+    }
+});
 
-    IPython.notebook.widget_manager.register_widget_view('FloatTextView', FloatTextView);
-});
  No newline at end of file
+IPython.notebook.widget_manager.register_widget_view('FloatTextView', FloatTextView);

IPython/html/static/notebook/js/widgets/int_range.js

@@ -1,119 +1,117 b''
-require(["notebook/js/widget"], function () {
-    var IntRangeWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel);
+var IntRangeWidgetModel = IPython.WidgetModel.extend({});
+IPython.notebook.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel);
 
-    var IntSliderView = IPython.WidgetView.extend({
+var IntSliderView = IPython.WidgetView.extend({
+    
+    // Called when view is rendered.
+    render : function(){
+        this.$el.html('');
+        this.$slider = $('<div />')
+                        .slider({})
+                        .addClass('slider');
         
-        // Called when view is rendered.
-        render : function(){
-            this.$el.html('');
-            this.$slider = $('<div />')
-                            .slider({})
-                            .addClass('slider');
-            
-            // Put the slider in a container 
-            this.$slider_container = $('<div />')
-                                    .css('padding-top', '4px')
-                                    .css('padding-bottom', '4px')
-                                    .addClass(this.model.comm.comm_id)
-                                    .append(this.$slider);    
-            this.$el.append(this.$slider_container);
-            
-            // Set defaults.
-            this.update();
-        },
+        // Put the slider in a container 
+        this.$slider_container = $('<div />')
+                                .css('padding-top', '4px')
+                                .css('padding-bottom', '4px')
+                                .addClass(this.model.comm.comm_id)
+                                .append(this.$slider);    
+        this.$el.append(this.$slider_container);
         
-        // Handles: Backend -> Frontend Sync
-        //          Frontent -> Frontend Sync
-        update : function(){
-            // Slider related keys.
-            var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
-            for (var index in _keys) {
-                var key = _keys[index];
-                if (this.model.get(key) != undefined) {
-                    this.$slider.slider("option", key, this.model.get(key));
-                }
+        // Set defaults.
+        this.update();
+    },
+    
+    // Handles: Backend -> Frontend Sync
+    //          Frontent -> Frontend Sync
+    update : function(){
+        // Slider related keys.
+        var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
+        for (var index in _keys) {
+            var key = _keys[index];
+            if (this.model.get(key) != undefined) {
+                this.$slider.slider("option", key, this.model.get(key));
             }
-        },
-        
-        // Handles: User input
-        events: { "slide" : "handleSliderChange" }, 
-        handleSliderChange: function(e, ui) { 
-            this.model.set('value', ~~ui.value); // Double bit-wise not to truncate decimel
-            this.model.apply(this);
-        },
-    });
+        }
+    },
+    
+    // Handles: User input
+    events: { "slide" : "handleSliderChange" }, 
+    handleSliderChange: function(e, ui) { 
+        this.model.set('value', ~~ui.value); // Double bit-wise not to truncate decimel
+        this.model.apply(this);
+    },
+});
 
-    IPython.notebook.widget_manager.register_widget_view('IntSliderView', IntSliderView);
+IPython.notebook.widget_manager.register_widget_view('IntSliderView', IntSliderView);
 
-    var IntTextView = IPython.WidgetView.extend({
-        
-        // Called when view is rendered.
-        render : function(){
-            this.$el
-                .html('')
-                .addClass(this.model.comm.comm_id);
-            this.$textbox = $('<input type="text" />')
-                .addClass('input')
-                .appendTo(this.$el);
-            this.update(); // Set defaults.
-        },
-        
-        // Handles: Backend -> Frontend Sync
-        //          Frontent -> Frontend Sync
-        update : function(){
-            var value = this.model.get('value');
-            if (!this.changing && parseInt(this.$textbox.val()) != value) {
-                this.$textbox.val(value);
-            }
-            
-            if (this.model.get('disabled')) {
-                this.$textbox.attr('disabled','disabled');
-            } else {
-                this.$textbox.removeAttr('disabled');
-            }
-        },
+var IntTextView = IPython.WidgetView.extend({
+    
+    // Called when view is rendered.
+    render : function(){
+        this.$el
+            .html('')
+            .addClass(this.model.comm.comm_id);
+        this.$textbox = $('<input type="text" />')
+            .addClass('input')
+            .appendTo(this.$el);
+        this.update(); // Set defaults.
+    },
+    
+    // Handles: Backend -> Frontend Sync
+    //          Frontent -> Frontend Sync
+    update : function(){
+        var value = this.model.get('value');
+        if (!this.changing && parseInt(this.$textbox.val()) != value) {
+            this.$textbox.val(value);
+        }
         
+        if (this.model.get('disabled')) {
+            this.$textbox.attr('disabled','disabled');
+        } else {
+            this.$textbox.removeAttr('disabled');
+        }
+    },
+    
+    
+    events: {"keyup input" : "handleChanging",
+            "paste input" : "handleChanging",
+            "cut input" : "handleChanging",
+            "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
+    
+    // Handles and validates user input.
+    handleChanging: function(e) { 
         
-        events: {"keyup input" : "handleChanging",
-                "paste input" : "handleChanging",
-                "cut input" : "handleChanging",
-                "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
+        // Try to parse value as a float.
+        var numericalValue = 0;
+        if (e.target.value != '') {
+            numericalValue = parseInt(e.target.value);
+        }
         
-        // Handles and validates user input.
-        handleChanging: function(e) { 
-            
-            // Try to parse value as a float.
-            var numericalValue = 0;
-            if (e.target.value != '') {
-                numericalValue = parseInt(e.target.value);
-            }
+        // If parse failed, reset value to value stored in model.
+        if (isNaN(numericalValue)) {
+            e.target.value = this.model.get('value');
+        } else if (!isNaN(numericalValue)) {
+            numericalValue = Math.min(this.model.get('max'), numericalValue);
+            numericalValue = Math.max(this.model.get('min'), numericalValue);
             
-            // If parse failed, reset value to value stored in model.
-            if (isNaN(numericalValue)) {
-                e.target.value = this.model.get('value');
-            } else if (!isNaN(numericalValue)) {
-                numericalValue = Math.min(this.model.get('max'), numericalValue);
-                numericalValue = Math.max(this.model.get('min'), numericalValue);
-                
-                // Apply the value if it has changed.
-                if (numericalValue != this.model.get('value')) {
-                    this.changing = true;
-                    this.model.set('value', numericalValue);
-                    this.model.apply(this);
-                    this.changing = false;
-                }
-            }
-        },
-        
-        // Applies validated input.
-        handleChanged: function(e) { 
-            // Update the textbox
-            if (this.model.get('value') != e.target.value) {
-                e.target.value = this.model.get('value');
+            // Apply the value if it has changed.
+            if (numericalValue != this.model.get('value')) {
+                this.changing = true;
+                this.model.set('value', numericalValue);
+                this.model.apply(this);
+                this.changing = false;
             }
         }
-    });
+    },
+    
+    // Applies validated input.
+    handleChanged: function(e) { 
+        // Update the textbox
+        if (this.model.get('value') != e.target.value) {
+            e.target.value = this.model.get('value');
+        }
+    }
+});
 
-    IPython.notebook.widget_manager.register_widget_view('IntTextView', IntTextView);
-});
  No newline at end of file
+IPython.notebook.widget_manager.register_widget_view('IntTextView', IntTextView);

IPython/html/static/notebook/js/widgets/selection.js

@@ -1,130 +1,128 b''
-require(["notebook/js/widget"], function () {
-    var SelectionWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
+var SelectionWidgetModel = IPython.WidgetModel.extend({});
+IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
 
-    var DropdownView = IPython.WidgetView.extend({
+var DropdownView = IPython.WidgetView.extend({
+    
+    // Called when view is rendered.
+    render : function(){
         
-        // Called when view is rendered.
-        render : function(){
-            
-            this.$el
-                .html('')
-                .addClass(this.model.comm.comm_id);
-            this.$buttongroup = $('<div />')
-                                .addClass('btn-group')
-                                .appendTo(this.$el);
-            this.$droplabel = $('<button />')
-                                .addClass('btn')
-                                .appendTo(this.$buttongroup);
-            this.$dropbutton = $('<button />')
-                                .addClass('btn')
-                                .addClass('dropdown-toggle')
-                                .attr('data-toggle', 'dropdown')
-                                .html('<span class="caret"></span>')
-                                .appendTo(this.$buttongroup);
-            this.$droplist = $('<ul />')
-                                .addClass('dropdown-menu')
-                                .appendTo(this.$buttongroup);
-            
-            // Set defaults.
-            this.update();
-        },
+        this.$el
+            .html('')
+            .addClass(this.model.comm.comm_id);
+        this.$buttongroup = $('<div />')
+                            .addClass('btn-group')
+                            .appendTo(this.$el);
+        this.$droplabel = $('<button />')
+                            .addClass('btn')
+                            .appendTo(this.$buttongroup);
+        this.$dropbutton = $('<button />')
+                            .addClass('btn')
+                            .addClass('dropdown-toggle')
+                            .attr('data-toggle', 'dropdown')
+                            .html('<span class="caret"></span>')
+                            .appendTo(this.$buttongroup);
+        this.$droplist = $('<ul />')
+                            .addClass('dropdown-menu')
+                            .appendTo(this.$buttongroup);
+        
+        // Set defaults.
+        this.update();
+    },
+    
+    // Handles: Backend -> Frontend Sync
+    //          Frontent -> Frontend Sync
+    update : function(){
+        this.$droplabel.html(this.model.get('value'));
         
-        // Handles: Backend -> Frontend Sync
-        //          Frontent -> Frontend Sync
-        update : function(){
-            this.$droplabel.html(this.model.get('value'));
+        var items = this.model.get('values');
+        this.$droplist.html('');
+        for (var index in items) {
+            var that = this;
+            var item_button = $('<a href="#"/>')
+                .html(items[index])
+                .on('click', function(e){
+                    that.model.set('value', $(e.target).html(), this );
+                })
             
-            var items = this.model.get('values');
-            this.$droplist.html('');
-            for (var index in items) {
-                var that = this;
-                var item_button = $('<a href="#"/>')
+            this.$droplist.append($('<li />').append(item_button))
+        }
+        
+        if (this.model.get('disabled')) {
+            this.$buttongroup.attr('disabled','disabled');
+            this.$droplabel.attr('disabled','disabled');
+            this.$dropbutton.attr('disabled','disabled');
+            this.$droplist.attr('disabled','disabled');
+        } else {
+            this.$buttongroup.removeAttr('disabled');
+            this.$droplabel.removeAttr('disabled');
+            this.$dropbutton.removeAttr('disabled');
+            this.$droplist.removeAttr('disabled');
+        }
+    },
+    
+});
+
+IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView);
+var RadioButtonView = IPython.WidgetView.extend({
+    
+    // Called when view is rendered.
+    render : function(){
+        this.$el
+            .html('')
+            .addClass(this.model.comm.comm_id);
+        this.update();
+    },
+    
+    // Handles: Backend -> Frontend Sync
+    //          Frontent -> Frontend Sync
+    update : function(){
+        
+        // Add missing items to the DOM.
+        var items = this.model.get('values');
+        for (var index in items) {
+            var item_query = ' :input[value="' + items[index] + '"]';
+            if (this.$el.find(item_query).length == 0) {
+                var $label = $('<label />')
+                    .addClass('radio')
                     .html(items[index])
-                    .on('click', function(e){
-                        that.model.set('value', $(e.target).html(), this );
-                    })
+                    .appendTo(this.$el);
                 
-                this.$droplist.append($('<li />').append(item_button))
+                var that = this;
+                $('<input />')
+                    .attr('type', 'radio')
+                    .addClass(this.model)
+                    .val(items[index])
+                    .prependTo($label)
+                    .on('click', function(e){
+                        that.model.set('value', $(e.target).val(), this);
+                        that.model.apply();
+                    });
             }
             
-            if (this.model.get('disabled')) {
-                this.$buttongroup.attr('disabled','disabled');
-                this.$droplabel.attr('disabled','disabled');
-                this.$dropbutton.attr('disabled','disabled');
-                this.$droplist.attr('disabled','disabled');
+            if (this.model.get('value') == items[index]) {
+                this.$el.find(item_query).prop('checked', true);
             } else {
-                this.$buttongroup.removeAttr('disabled');
-                this.$droplabel.removeAttr('disabled');
-                this.$dropbutton.removeAttr('disabled');
-                this.$droplist.removeAttr('disabled');
+                this.$el.find(item_query).prop('checked', false);
             }
-        },
+        }
         
-    });
-
-    IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView);
-    var RadioButtonView = IPython.WidgetView.extend({
-        
-        // Called when view is rendered.
-        render : function(){
-            this.$el
-                .html('')
-                .addClass(this.model.comm.comm_id);
-            this.update();
-        },
-        
-        // Handles: Backend -> Frontend Sync
-        //          Frontent -> Frontend Sync
-        update : function(){
-            
-            // Add missing items to the DOM.
-            var items = this.model.get('values');
+        // Remove items that no longer exist.
+        this.$el.find('input').each(function(i, obj) {
+            var value = $(obj).val();
+            var found = false;
             for (var index in items) {
-                var item_query = ' :input[value="' + items[index] + '"]';
-                if (this.$el.find(item_query).length == 0) {
-                    var $label = $('<label />')
-                        .addClass('radio')
-                        .html(items[index])
-                        .appendTo(this.$el);
-                    
-                    var that = this;
-                    $('<input />')
-                        .attr('type', 'radio')
-                        .addClass(this.model)
-                        .val(items[index])
-                        .prependTo($label)
-                        .on('click', function(e){
-                            that.model.set('value', $(e.target).val(), this);
-                            that.model.apply();
-                        });
-                }
-                
-                if (this.model.get('value') == items[index]) {
-                    this.$el.find(item_query).prop('checked', true);
-                } else {
-                    this.$el.find(item_query).prop('checked', false);
+                if (items[index] == value) {
+                    found = true;
+                    break;
                 }
             }
             
-            // Remove items that no longer exist.
-            this.$el.find('input').each(function(i, obj) {
-                var value = $(obj).val();
-                var found = false;
-                for (var index in items) {
-                    if (items[index] == value) {
-                        found = true;
-                        break;
-                    }
-                }
-                
-                if (!found) {
-                    $(obj).parent().remove();
-                }
-            });
-        },
-        
-    });
+            if (!found) {
+                $(obj).parent().remove();
+            }
+        });
+    },
+    
+});
 
-    IPython.notebook.widget_manager.register_widget_view('RadioButtonView', RadioButtonView);
-});
  No newline at end of file
+IPython.notebook.widget_manager.register_widget_view('RadioButtonView', RadioButtonView);

IPython/html/static/notebook/js/widgets/string.js

@@ -1,77 +1,74 b''
-require(["notebook/js/widget"], function () {
-    var StringWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
+var StringWidgetModel = IPython.WidgetModel.extend({});
+IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
 
-    var TextareaView = IPython.WidgetView.extend({
-      
-        // Called when view is rendered.
-        render : function(){
-            this.$el
-                .html('')
-                .addClass(this.model.comm.comm_id);
-            this.$textbox = $('<textarea />')
-                .attr('rows', 5)
-                .appendTo(this.$el);
-            this.update(); // Set defaults.
-        },
-        
-        // Handles: Backend -> Frontend Sync
-        //          Frontent -> Frontend Sync
-        update : function(){
-            if (!this.user_invoked_update) {
-                this.$textbox.val(this.model.get('value'));
-            }
-        },
-        
-        events: {"keyup textarea" : "handleChanging",
-                "paste textarea" : "handleChanging",
-                "cut textarea" : "handleChanging"},
-        
-        // Handles and validates user input.
-        handleChanging: function(e) { 
-            this.user_invoked_update = true;
-            this.model.set('value', e.target.value);
-            this.model.apply(this);
-            this.user_invoked_update = false;
-        },
-    });
+var TextareaView = IPython.WidgetView.extend({
+  
+    // Called when view is rendered.
+    render : function(){
+        this.$el
+            .html('')
+            .addClass(this.model.comm.comm_id);
+        this.$textbox = $('<textarea />')
+            .attr('rows', 5)
+            .appendTo(this.$el);
+        this.update(); // Set defaults.
+    },
+    
+    // Handles: Backend -> Frontend Sync
+    //          Frontent -> Frontend Sync
+    update : function(){
+        if (!this.user_invoked_update) {
+            this.$textbox.val(this.model.get('value'));
+        }
+    },
+    
+    events: {"keyup textarea" : "handleChanging",
+            "paste textarea" : "handleChanging",
+            "cut textarea" : "handleChanging"},
+    
+    // Handles and validates user input.
+    handleChanging: function(e) { 
+        this.user_invoked_update = true;
+        this.model.set('value', e.target.value);
+        this.model.apply(this);
+        this.user_invoked_update = false;
+    },
+});
 
-    IPython.notebook.widget_manager.register_widget_view('TextareaView', TextareaView);
+IPython.notebook.widget_manager.register_widget_view('TextareaView', TextareaView);
 
-    var TextboxView = IPython.WidgetView.extend({
-      
-        // Called when view is rendered.
-        render : function(){
-            this.$el
-                .html('')
-                .addClass(this.model.comm.comm_id);
-            this.$textbox = $('<input type="text" />')
-                .addClass('input')
-                .appendTo(this.$el);
-            this.update(); // Set defaults.
-        },
-        
-        // Handles: Backend -> Frontend Sync
-        //          Frontent -> Frontend Sync
-        update : function(){
-            if (!this.user_invoked_update) {
-                this.$textbox.val(this.model.get('value'));
-            }
-        },
-        
-        events: {"keyup input" : "handleChanging",
-                "paste input" : "handleChanging",
-                "cut input" : "handleChanging"},
-        
-        // Handles and validates user input.
-        handleChanging: function(e) { 
-            this.user_invoked_update = true;
-            this.model.set('value', e.target.value);
-            this.model.apply(this);
-            this.user_invoked_update = false;
-        },
-    });
+var TextboxView = IPython.WidgetView.extend({
+  
+    // Called when view is rendered.
+    render : function(){
+        this.$el
+            .html('')
+            .addClass(this.model.comm.comm_id);
+        this.$textbox = $('<input type="text" />')
+            .addClass('input')
+            .appendTo(this.$el);
+        this.update(); // Set defaults.
+    },
+    
+    // Handles: Backend -> Frontend Sync
+    //          Frontent -> Frontend Sync
+    update : function(){
+        if (!this.user_invoked_update) {
+            this.$textbox.val(this.model.get('value'));
+        }
+    },
+    
+    events: {"keyup input" : "handleChanging",
+            "paste input" : "handleChanging",
+            "cut input" : "handleChanging"},
+    
+    // Handles and validates user input.
+    handleChanging: function(e) { 
+        this.user_invoked_update = true;
+        this.model.set('value', e.target.value);
+        this.model.apply(this);
+        this.user_invoked_update = false;
+    },
+});
 
-    IPython.notebook.widget_manager.register_widget_view('TextboxView', TextboxView);
-
-});
  No newline at end of file
+IPython.notebook.widget_manager.register_widget_view('TextboxView', TextboxView);

IPython/html/templates/page.html

@@ -71,6 +71,8 b''
 <script src="{{static_url("components/jquery/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("components/jquery-ui/ui/minified/jquery-ui.min.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("components/bootstrap/bootstrap/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("components/underscore/underscore-min.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("components/backbone/backbone-min.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("base/js/namespace.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("base/js/page.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("auth/js/loginwidget.js") }}" type="text/javascript" charset="utf-8"></script>

IPython/html/widgets/__init__.py

@@ -1,4 +1,4 b''
-from base import Widget, init_widget_js
+from base import Widget
 
 from container import ContainerWidget
 from float_range import FloatRangeWidget

IPython/html/widgets/base.py

@@ -1,4 +1,3 b''
-
 from copy import copy
 from glob import glob
 import uuid
@@ -124,6 +123,7 b' class Widget(LoggingConfigurable):'
             view_name = self.default_view_name
         
         # Require traitlet specified widget js
+        self._require_js('static/notebook/js/widget.js')
         for requirement in self.js_requirements:
             self._require_js(requirement)
 
@@ -165,11 +165,4 b' class Widget(LoggingConfigurable):'
     def _require_js(self, js_path):
         # Since we are loading requirements that must be loaded before this call
         # returns, preform async js load.
-        display(Javascript(data="""
-$.ajax({
-    url: '{0}',
-    async: false,
-    dataType: "script",
-    timeout: 1000, // Wait a maximum of one second for the script to load.
-});
-        """.format(js_path)))
  No newline at end of file
+        display(Javascript(data='$.ajax({url: "%s", async: false, dataType: "script", timeout: 1000});' % js_path))

IPython/html/widgets/container.py

@@ -7,6 +7,6 b' from IPython.utils.javascript import display_all_js'
 class ContainerWidget(Widget):
     target_name = Unicode('container_widget')
     default_view_name = Unicode('ContainerView')
-    js_requirements = List(["notebook/js/widgets/container.js"])
+    js_requirements = List(["static/notebook/js/widgets/container.js"])
     
     _keys = []

IPython/html/widgets/float_range.py

@@ -7,7 +7,7 b' from IPython.utils.javascript import display_all_js'
 class FloatRangeWidget(Widget):
     target_name = Unicode('FloatRangeWidgetModel')
     default_view_name = Unicode('FloatSliderView')
-    js_requirements = List(["notebook/js/widgets/float_range.js"])
+    js_requirements = List(["static/notebook/js/widgets/float_range.js"])
     _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation']
     
     value = Float(0.0) 

IPython/html/widgets/int_range.py

@@ -7,7 +7,7 b' from IPython.utils.javascript import display_all_js'
 class IntRangeWidget(Widget):
     target_name = Unicode('IntRangeWidgetModel')
     default_view_name = Unicode('IntSliderView')
-    js_requirements = List(["notebook/js/widgets/int_range.js"])
+    js_requirements = List(["static/notebook/js/widgets/int_range.js"])
     _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation']
 
     value = Int(0) 

IPython/html/widgets/selection.py

@@ -7,7 +7,7 b' from IPython.utils.javascript import display_all_js'
 class SelectionWidget(Widget):
     target_name = Unicode('SelectionWidgetModel')
     default_view_name = Unicode('DropdownView')
-    js_requirements = List(["notebook/js/widgets/selection.js"])
+    js_requirements = List(["static/notebook/js/widgets/selection.js"])
     _keys = ['value', 'values', 'disabled']
 
     value = Unicode()

IPython/html/widgets/string.py

@@ -7,7 +7,7 b' from IPython.utils.javascript import display_all_js'
 class StringWidget(Widget):
     target_name = Unicode('StringWidgetModel')
     default_view_name = Unicode('TextboxView')
-    js_requirements = List(["notebook/js/widgets/string.js"])
+    js_requirements = List(["static/notebook/js/widgets/string.js"])
     _keys = ['value', 'row_count', 'disabled']
     
     value = Unicode()