##// END OF EJS Templates
Added callbacks method to view
Jonathan Frederic -
Show More
@@ -1,331 +1,333
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2013 The IPython Development Team
2 // Copyright (C) 2013 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // Base Widget Model and View classes
9 // Base Widget Model and View classes
10 //============================================================================
10 //============================================================================
11
11
12 /**
12 /**
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 **/
15 **/
16
16
17 define(["notebook/js/widgetmanager",
17 define(["notebook/js/widgetmanager",
18 "underscore",
18 "underscore",
19 "backbone"],
19 "backbone"],
20 function(widget_manager, underscore, backbone){
20 function(widget_manager, underscore, backbone){
21
21
22 //--------------------------------------------------------------------
22 //--------------------------------------------------------------------
23 // WidgetModel class
23 // WidgetModel class
24 //--------------------------------------------------------------------
24 //--------------------------------------------------------------------
25 var WidgetModel = Backbone.Model.extend({
25 var WidgetModel = Backbone.Model.extend({
26 constructor: function (widget_manager, model_id, comm) {
26 constructor: function (widget_manager, model_id, comm) {
27 this.widget_manager = widget_manager;
27 this.widget_manager = widget_manager;
28 this.pending_msgs = 0;
28 this.pending_msgs = 0;
29 this.msg_throttle = 3;
29 this.msg_throttle = 3;
30 this.msg_buffer = null;
30 this.msg_buffer = null;
31 this.id = model_id;
31 this.id = model_id;
32 this.views = [];
32 this.views = [];
33
33
34 if (comm !== undefined) {
34 if (comm !== undefined) {
35 // Remember comm associated with the model.
35 // Remember comm associated with the model.
36 this.comm = comm;
36 this.comm = comm;
37 comm.model = this;
37 comm.model = this;
38
38
39 // Hook comm messages up to model.
39 // Hook comm messages up to model.
40 comm.on_close($.proxy(this._handle_comm_closed, this));
40 comm.on_close($.proxy(this._handle_comm_closed, this));
41 comm.on_msg($.proxy(this._handle_comm_msg, this));
41 comm.on_msg($.proxy(this._handle_comm_msg, this));
42 }
42 }
43 return Backbone.Model.apply(this);
43 return Backbone.Model.apply(this);
44 },
44 },
45
45
46 send: function (content, callbacks) {
46 send: function (content, callbacks) {
47 if (this.comm !== undefined) {
47 if (this.comm !== undefined) {
48 var data = {method: 'custom', custom_content: content};
48 var data = {method: 'custom', custom_content: content};
49 this.comm.send(data, callbacks);
49 this.comm.send(data, callbacks);
50 }
50 }
51 },
51 },
52
52
53 // Handle when a widget is closed.
53 // Handle when a widget is closed.
54 _handle_comm_closed: function (msg) {
54 _handle_comm_closed: function (msg) {
55 this.trigger('comm:close');
55 this.trigger('comm:close');
56 delete this.comm.model; // Delete ref so GC will collect widget model.
56 delete this.comm.model; // Delete ref so GC will collect widget model.
57 delete this.comm;
57 delete this.comm;
58 delete this.model_id; // Delete id from model so widget manager cleans up.
58 delete this.model_id; // Delete id from model so widget manager cleans up.
59 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
59 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
60 },
60 },
61
61
62
62
63 // Handle incoming comm msg.
63 // Handle incoming comm msg.
64 _handle_comm_msg: function (msg) {
64 _handle_comm_msg: function (msg) {
65 var method = msg.content.data.method;
65 var method = msg.content.data.method;
66 switch (method) {
66 switch (method) {
67 case 'update':
67 case 'update':
68 this.apply_update(msg.content.data.state);
68 this.apply_update(msg.content.data.state);
69 break;
69 break;
70 case 'custom':
70 case 'custom':
71 this.trigger('msg:custom', msg.content.data.custom_content);
71 this.trigger('msg:custom', msg.content.data.custom_content);
72 break;
72 break;
73 default:
73 default:
74 // pass on to widget manager
74 // pass on to widget manager
75 this.widget_manager.handle_msg(msg, this);
75 this.widget_manager.handle_msg(msg, this);
76 }
76 }
77 },
77 },
78
78
79
79
80 // Handle when a widget is updated via the python side.
80 // Handle when a widget is updated via the python side.
81 apply_update: function (state) {
81 apply_update: function (state) {
82 this.updating = true;
82 this.updating = true;
83 try {
83 try {
84 for (var key in state) {
84 for (var key in state) {
85 if (state.hasOwnProperty(key)) {
85 if (state.hasOwnProperty(key)) {
86 this.set(key, state[key]);
86 this.set(key, state[key]);
87 }
87 }
88 }
88 }
89 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
89 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
90 this.save();
90 this.save();
91 } finally {
91 } finally {
92 this.updating = false;
92 this.updating = false;
93 }
93 }
94 },
94 },
95
95
96
96
97 _handle_status: function (msg, callbacks) {
97 _handle_status: function (msg, callbacks) {
98 //execution_state : ('busy', 'idle', 'starting')
98 //execution_state : ('busy', 'idle', 'starting')
99 if (this.comm !== undefined && msg.content.execution_state ==='idle') {
99 if (this.comm !== undefined && msg.content.execution_state ==='idle') {
100 // Send buffer if this message caused another message to be
100 // Send buffer if this message caused another message to be
101 // throttled.
101 // throttled.
102 if (this.msg_buffer !== null &&
102 if (this.msg_buffer !== null &&
103 this.msg_throttle === this.pending_msgs) {
103 this.msg_throttle === this.pending_msgs) {
104 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
104 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
105 this.comm.send(data, callbacks);
105 this.comm.send(data, callbacks);
106 this.msg_buffer = null;
106 this.msg_buffer = null;
107 } else {
107 } else {
108 // Only decrease the pending message count if the buffer
108 // Only decrease the pending message count if the buffer
109 // doesn't get flushed (sent).
109 // doesn't get flushed (sent).
110 --this.pending_msgs;
110 --this.pending_msgs;
111 }
111 }
112 }
112 }
113 },
113 },
114
114
115
115
116 // Custom syncronization logic.
116 // Custom syncronization logic.
117 _handle_sync: function (method, options) {
117 _handle_sync: function (method, options) {
118 var model_json = this.toJSON();
118 var model_json = this.toJSON();
119 var attr;
119 var attr;
120
120
121 // Only send updated state if the state hasn't been changed
121 // Only send updated state if the state hasn't been changed
122 // during an update.
122 // during an update.
123 if (this.comm !== undefined) {
123 if (this.comm !== undefined) {
124 if (!this.updating) {
124 if (!this.updating) {
125 if (this.pending_msgs >= this.msg_throttle) {
125 if (this.pending_msgs >= this.msg_throttle) {
126 // The throttle has been exceeded, buffer the current msg so
126 // The throttle has been exceeded, buffer the current msg so
127 // it can be sent once the kernel has finished processing
127 // it can be sent once the kernel has finished processing
128 // some of the existing messages.
128 // some of the existing messages.
129 if (method=='patch') {
129 if (method=='patch') {
130 if (this.msg_buffer === null) {
130 if (this.msg_buffer === null) {
131 this.msg_buffer = $.extend({}, model_json); // Copy
131 this.msg_buffer = $.extend({}, model_json); // Copy
132 }
132 }
133 for (attr in options.attrs) {
133 for (attr in options.attrs) {
134 this.msg_buffer[attr] = options.attrs[attr];
134 this.msg_buffer[attr] = options.attrs[attr];
135 }
135 }
136 } else {
136 } else {
137 this.msg_buffer = $.extend({}, model_json); // Copy
137 this.msg_buffer = $.extend({}, model_json); // Copy
138 }
138 }
139
139
140 } else {
140 } else {
141 // We haven't exceeded the throttle, send the message like
141 // We haven't exceeded the throttle, send the message like
142 // normal. If this is a patch operation, just send the
142 // normal. If this is a patch operation, just send the
143 // changes.
143 // changes.
144 var send_json = model_json;
144 var send_json = model_json;
145 if (method =='patch') {
145 if (method =='patch') {
146 send_json = {};
146 send_json = {};
147 for (attr in options.attrs) {
147 for (attr in options.attrs) {
148 send_json[attr] = options.attrs[attr];
148 send_json[attr] = options.attrs[attr];
149 }
149 }
150 }
150 }
151
151
152 var data = {method: 'backbone', sync_data: send_json};
152 var data = {method: 'backbone', sync_data: send_json};
153 this.comm.send(data, options.callbacks);
153 this.comm.send(data, options.callbacks);
154 this.pending_msgs++;
154 this.pending_msgs++;
155 }
155 }
156 }
156 }
157 }
157 }
158
158
159 // Since the comm is a one-way communication, assume the message
159 // Since the comm is a one-way communication, assume the message
160 // arrived.
160 // arrived.
161 return model_json;
161 return model_json;
162 },
162 },
163
163
164 });
164 });
165
165
166
166
167 //--------------------------------------------------------------------
167 //--------------------------------------------------------------------
168 // WidgetView class
168 // WidgetView class
169 //--------------------------------------------------------------------
169 //--------------------------------------------------------------------
170 var BaseWidgetView = Backbone.View.extend({
170 var BaseWidgetView = Backbone.View.extend({
171 initialize: function(options) {
171 initialize: function(options) {
172 this.model.on('change',this.update,this);
172 this.model.on('change',this.update,this);
173 this.widget_manager = options.widget_manager;
173 this.widget_manager = options.widget_manager;
174 this.comm_manager = options.widget_manager.comm_manager;
174 this.comm_manager = options.widget_manager.comm_manager;
175 this.options = options.options;
175 this.options = options.options;
176 this.child_views = [];
176 this.child_views = [];
177 this.model.views.push(this);
177 this.model.views.push(this);
178 },
178 },
179
179
180 update: function(){
180 update: function(){
181 // update view to be consistent with this.model
181 // update view to be consistent with this.model
182 // triggered on model change
182 // triggered on model change
183 },
183 },
184
184
185 <<<<<<< HEAD
185 <<<<<<< HEAD
186 <<<<<<< HEAD
186 <<<<<<< HEAD
187 child_view: function(model_id, view_name) {
187 child_view: function(model_id, view_name) {
188 =======
188 =======
189 child_view: function(model_id, view_name, options) {
189 child_view: function(model_id, view_name, options) {
190 <<<<<<< HEAD
190 <<<<<<< HEAD
191 >>>>>>> s/comm_id/model_id (left over from before)
191 >>>>>>> s/comm_id/model_id (left over from before)
192 // create and return a child view, given a comm id for a model and (optionally) a view name
192 // create and return a child view, given a comm id for a model and (optionally) a view name
193 =======
193 =======
194 // create and return a child view, given a model id for a model and (optionally) a view name
194 // create and return a child view, given a model id for a model and (optionally) a view name
195 >>>>>>> Updated comm id comments in view to model id
195 >>>>>>> Updated comm id comments in view to model id
196 // if the view name is not given, it defaults to the model's default view attribute
196 // if the view name is not given, it defaults to the model's default view attribute
197 var child_model = this.widget_manager.get_model(model_id);
197 var child_model = this.widget_manager.get_model(model_id);
198 <<<<<<< HEAD
198 <<<<<<< HEAD
199 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell);
199 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell);
200 =======
200 =======
201 var child_view = this.widget_manager.create_view(child_model, view_name, options);
201 var child_view = this.widget_manager.create_view(child_model, view_name, options);
202 >>>>>>> Completely remove cell from model and view.
202 >>>>>>> Completely remove cell from model and view.
203 this.child_views[model_id] = child_view;
203 this.child_views[model_id] = child_view;
204 =======
204 =======
205 child_view: function(comm_id, view_name, options) {
205 child_view: function(comm_id, view_name, options) {
206 // create and return a child view, given a comm id for a model and (optionally) a view name
206 // create and return a child view, given a comm id for a model and (optionally) a view name
207 // if the view name is not given, it defaults to the model's default view attribute
207 // if the view name is not given, it defaults to the model's default view attribute
208 var child_model = this.comm_manager.comms[comm_id].model;
208 var child_model = this.comm_manager.comms[comm_id].model;
209 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell, options);
209 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell, options);
210 this.child_views[comm_id] = child_view;
210 this.child_views[comm_id] = child_view;
211 >>>>>>> Add widget view options in creating child views
211 >>>>>>> Add widget view options in creating child views
212 return child_view;
212 return child_view;
213 },
213 },
214
214
215 update_child_views: function(old_list, new_list) {
215 update_child_views: function(old_list, new_list) {
216 // this function takes an old list and new list of model ids
216 // this function takes an old list and new list of model ids
217 // views in child_views that correspond to deleted ids are deleted
217 // views in child_views that correspond to deleted ids are deleted
218 // views corresponding to added ids are added child_views
218 // views corresponding to added ids are added child_views
219
219
220 // delete old views
220 // delete old views
221 _.each(_.difference(old_list, new_list), function(element, index, list) {
221 _.each(_.difference(old_list, new_list), function(element, index, list) {
222 var view = this.child_views[element];
222 var view = this.child_views[element];
223 delete this.child_views[element];
223 delete this.child_views[element];
224 view.remove();
224 view.remove();
225 }, this);
225 }, this);
226
226
227 // add new views
227 // add new views
228 _.each(_.difference(new_list, old_list), function(element, index, list) {
228 _.each(_.difference(new_list, old_list), function(element, index, list) {
229 // this function adds the view to the child_views dictionary
229 // this function adds the view to the child_views dictionary
230 this.child_view(element);
230 this.child_view(element);
231 }, this);
231 }, this);
232 },
232 },
233
233
234
234 callbacks: function(){
235 return this.widget_manager.callbacks(this);
236 }
235
237
236 render: function(){
238 render: function(){
237 // render the view. By default, this is only called the first time the view is created
239 // render the view. By default, this is only called the first time the view is created
238 },
240 },
239 send: function (content) {
241 send: function (content) {
240 this.model.send(content, this.widget_manager.callbacks(this));
242 this.model.send(content, this.callbacks());
241 },
243 },
242
244
243 touch: function () {
245 touch: function () {
244 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.widget_manager.callbacks(this)});
246 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.callbacks()});
245 },
247 },
246
248
247 });
249 });
248
250
249 var WidgetView = BaseWidgetView.extend({
251 var WidgetView = BaseWidgetView.extend({
250 initialize: function (options) {
252 initialize: function (options) {
251 // TODO: make changes more granular (e.g., trigger on visible:change)
253 // TODO: make changes more granular (e.g., trigger on visible:change)
252 this.model.on('change', this.update, this);
254 this.model.on('change', this.update, this);
253 this.model.on('msg:custom', this.on_msg, this);
255 this.model.on('msg:custom', this.on_msg, this);
254 BaseWidgetView.prototype.initialize.apply(this, arguments);
256 BaseWidgetView.prototype.initialize.apply(this, arguments);
255 },
257 },
256
258
257 on_msg: function(msg) {
259 on_msg: function(msg) {
258 switch(msg.msg_type) {
260 switch(msg.msg_type) {
259 case 'add_class':
261 case 'add_class':
260 this.add_class(msg.selector, msg.class_list);
262 this.add_class(msg.selector, msg.class_list);
261 break;
263 break;
262 case 'remove_class':
264 case 'remove_class':
263 this.remove_class(msg.selector, msg.class_list);
265 this.remove_class(msg.selector, msg.class_list);
264 break;
266 break;
265 }
267 }
266 },
268 },
267
269
268 add_class: function (selector, class_list) {
270 add_class: function (selector, class_list) {
269 var elements = this._get_selector_element(selector);
271 var elements = this._get_selector_element(selector);
270 if (elements.length > 0) {
272 if (elements.length > 0) {
271 elements.addClass(class_list);
273 elements.addClass(class_list);
272 }
274 }
273 },
275 },
274
276
275 remove_class: function (selector, class_list) {
277 remove_class: function (selector, class_list) {
276 var elements = this._get_selector_element(selector);
278 var elements = this._get_selector_element(selector);
277 if (elements.length > 0) {
279 if (elements.length > 0) {
278 elements.removeClass(class_list);
280 elements.removeClass(class_list);
279 }
281 }
280 },
282 },
281
283
282 update: function () {
284 update: function () {
283 // the very first update seems to happen before the element is finished rendering
285 // the very first update seems to happen before the element is finished rendering
284 // so we use setTimeout to give the element time to render
286 // so we use setTimeout to give the element time to render
285 var e = this.$el;
287 var e = this.$el;
286 var visible = this.model.get('visible');
288 var visible = this.model.get('visible');
287 setTimeout(function() {e.toggle(visible)},0);
289 setTimeout(function() {e.toggle(visible)},0);
288
290
289 var css = this.model.get('_css');
291 var css = this.model.get('_css');
290 if (css === undefined) {return;}
292 if (css === undefined) {return;}
291 for (var selector in css) {
293 for (var selector in css) {
292 if (css.hasOwnProperty(selector)) {
294 if (css.hasOwnProperty(selector)) {
293 // Apply the css traits to all elements that match the selector.
295 // Apply the css traits to all elements that match the selector.
294 var elements = this._get_selector_element(selector);
296 var elements = this._get_selector_element(selector);
295 if (elements.length > 0) {
297 if (elements.length > 0) {
296 var css_traits = css[selector];
298 var css_traits = css[selector];
297 for (var css_key in css_traits) {
299 for (var css_key in css_traits) {
298 if (css_traits.hasOwnProperty(css_key)) {
300 if (css_traits.hasOwnProperty(css_key)) {
299 elements.css(css_key, css_traits[css_key]);
301 elements.css(css_key, css_traits[css_key]);
300 }
302 }
301 }
303 }
302 }
304 }
303 }
305 }
304 }
306 }
305 },
307 },
306
308
307 _get_selector_element: function (selector) {
309 _get_selector_element: function (selector) {
308 // Get the elements via the css selector. If the selector is
310 // Get the elements via the css selector. If the selector is
309 // blank, apply the style to the $el_to_style element. If
311 // blank, apply the style to the $el_to_style element. If
310 // the $el_to_style element is not defined, use apply the
312 // the $el_to_style element is not defined, use apply the
311 // style to the view's element.
313 // style to the view's element.
312 var elements;
314 var elements;
313 if (selector === undefined || selector === null || selector === '') {
315 if (selector === undefined || selector === null || selector === '') {
314 if (this.$el_to_style === undefined) {
316 if (this.$el_to_style === undefined) {
315 elements = this.$el;
317 elements = this.$el;
316 } else {
318 } else {
317 elements = this.$el_to_style;
319 elements = this.$el_to_style;
318 }
320 }
319 } else {
321 } else {
320 elements = this.$el.find(selector);
322 elements = this.$el.find(selector);
321 }
323 }
322 return elements;
324 return elements;
323 },
325 },
324 });
326 });
325
327
326 IPython.WidgetModel = WidgetModel;
328 IPython.WidgetModel = WidgetModel;
327 IPython.WidgetView = WidgetView;
329 IPython.WidgetView = WidgetView;
328 IPython.BaseWidgetView = BaseWidgetView;
330 IPython.BaseWidgetView = BaseWidgetView;
329
331
330 return widget_manager;
332 return widget_manager;
331 });
333 });
General Comments 0
You need to be logged in to leave comments. Login now