Show More
@@ -29,10 +29,10 b' define([' | |||||
29 | .attr('id', guid) |
|
29 | .attr('id', guid) | |
30 | .addClass('panel-group'); |
|
30 | .addClass('panel-group'); | |
31 | this.model.on('change:selected_index', function(model, value, options) { |
|
31 | this.model.on('change:selected_index', function(model, value, options) { | |
32 |
this.update_selected_index( |
|
32 | this.update_selected_index(options); | |
33 | }, this); |
|
33 | }, this); | |
34 | this.model.on('change:_titles', function(model, value, options) { |
|
34 | this.model.on('change:_titles', function(model, value, options) { | |
35 |
this.update_titles( |
|
35 | this.update_titles(options); | |
36 | }, this); |
|
36 | }, this); | |
37 | this.on('displayed', function() { |
|
37 | this.on('displayed', function() { | |
38 | this.update_titles(); |
|
38 | this.update_titles(); | |
@@ -40,14 +40,23 b' define([' | |||||
40 | this.children_views.update(this.model.get('children')); |
|
40 | this.children_views.update(this.model.get('children')); | |
41 | }, |
|
41 | }, | |
42 |
|
42 | |||
43 | update_titles: function(titles) { |
|
|||
44 |
|
|
43 | /** | |
45 | * Set tab titles |
|
44 | * Update the contents of this view | |
|
45 | * | |||
|
46 | * Called when the model is changed. The model may have been | |||
|
47 | * changed by another view or by a state update from the back-end. | |||
46 |
|
|
48 | */ | |
47 | if (!titles) { |
|
49 | update: function(options) { | |
48 |
|
|
50 | this.update_titles(); | |
49 | } |
|
51 | this.update_selected_index(options); | |
|
52 | return TabView.__super__.update.apply(this); | |||
|
53 | }, | |||
50 |
|
54 | |||
|
55 | update_titles: function() { | |||
|
56 | /** | |||
|
57 | * Set tab titles | |||
|
58 | */ | |||
|
59 | var titles = this.model.get('_titles'); | |||
51 | var that = this; |
|
60 | var that = this; | |
52 | _.each(titles, function(title, page_index) { |
|
61 | _.each(titles, function(title, page_index) { | |
53 | var accordian = that.containers[page_index]; |
|
62 | var accordian = that.containers[page_index]; | |
@@ -60,12 +69,14 b' define([' | |||||
60 | }); |
|
69 | }); | |
61 | }, |
|
70 | }, | |
62 |
|
71 | |||
63 |
update_selected_index: function( |
|
72 | update_selected_index: function(options) { | |
64 | /** |
|
73 | /** | |
65 | * Only update the selection if the selection wasn't triggered |
|
74 | * Only update the selection if the selection wasn't triggered | |
66 | * by the front-end. It must be triggered by the back-end. |
|
75 | * by the front-end. It must be triggered by the back-end. | |
67 | */ |
|
76 | */ | |
68 | if (options === undefined || options.updated_view != this) { |
|
77 | if (options === undefined || options.updated_view != this) { | |
|
78 | var old_index = this.model.previous('selected_index'); | |||
|
79 | var new_index = this.model.get('selected_index'); | |||
69 | this.containers[old_index].find('.panel-collapse').collapse('hide'); |
|
80 | this.containers[old_index].find('.panel-collapse').collapse('hide'); | |
70 | if (0 <= new_index && new_index < this.containers.length) { |
|
81 | if (0 <= new_index && new_index < this.containers.length) { | |
71 | this.containers[new_index].find('.panel-collapse').collapse('show'); |
|
82 | this.containers[new_index].find('.panel-collapse').collapse('show'); | |
@@ -212,7 +223,6 b' define([' | |||||
212 | .css('list-style-type', 'none') |
|
223 | .css('list-style-type', 'none') | |
213 | .appendTo(this.$tabs); |
|
224 | .appendTo(this.$tabs); | |
214 |
|
225 | |||
215 |
|
||||
216 | var tab_text = $('<a />') |
|
226 | var tab_text = $('<a />') | |
217 | .attr('href', '#' + uuid) |
|
227 | .attr('href', '#' + uuid) | |
218 | .attr('data-toggle', 'tab') |
|
228 | .attr('data-toggle', 'tab') | |
@@ -235,6 +245,7 b' define([' | |||||
235 | .append(dummy) |
|
245 | .append(dummy) | |
236 | .appendTo(that.$tab_contents); |
|
246 | .appendTo(that.$tab_contents); | |
237 |
|
247 | |||
|
248 | this.update(); | |||
238 | return this.create_child_view(model).then(function(view) { |
|
249 | return this.create_child_view(model).then(function(view) { | |
239 | dummy.replaceWith(view.$el); |
|
250 | dummy.replaceWith(view.$el); | |
240 | view.parent_tab = tab; |
|
251 | view.parent_tab = tab; | |
@@ -243,6 +254,7 b' define([' | |||||
243 | // Trigger the displayed event of the child view. |
|
254 | // Trigger the displayed event of the child view. | |
244 | that.after_displayed(function() { |
|
255 | that.after_displayed(function() { | |
245 | view.trigger('displayed'); |
|
256 | view.trigger('displayed'); | |
|
257 | that.update(); | |||
246 | }); |
|
258 | }); | |
247 | return view; |
|
259 | return view; | |
248 | }).catch(utils.reject("Couldn't add child view to box", true)); |
|
260 | }).catch(utils.reject("Couldn't add child view to box", true)); | |
@@ -255,8 +267,15 b' define([' | |||||
255 | * Called when the model is changed. The model may have been |
|
267 | * Called when the model is changed. The model may have been | |
256 | * changed by another view or by a state update from the back-end. |
|
268 | * changed by another view or by a state update from the back-end. | |
257 | */ |
|
269 | */ | |
258 | if (options === undefined || options.updated_view != this) { |
|
270 | this.update_titles(); | |
259 | // Set tab titles |
|
271 | this.update_selected_index(options); | |
|
272 | return TabView.__super__.update.apply(this); | |||
|
273 | }, | |||
|
274 | ||||
|
275 | /** | |||
|
276 | * Updates the tab page titles. | |||
|
277 | */ | |||
|
278 | update_titles: function() { | |||
260 |
|
|
279 | var titles = this.model.get('_titles'); | |
261 |
|
|
280 | var that = this; | |
262 |
|
|
281 | _.each(titles, function(title, page_index) { | |
@@ -265,13 +284,18 b' define([' | |||||
265 |
|
|
284 | tab_text.text(title); | |
266 |
|
|
285 | } | |
267 |
|
|
286 | }); | |
|
287 | }, | |||
268 |
|
288 | |||
|
289 | /** | |||
|
290 | * Updates the tab page titles. | |||
|
291 | */ | |||
|
292 | update_selected_index: function(options) { | |||
|
293 | if (options === undefined || options.updated_view != this) { | |||
269 | var selected_index = this.model.get('selected_index'); |
|
294 | var selected_index = this.model.get('selected_index'); | |
270 | if (0 <= selected_index && selected_index < this.containers.length) { |
|
295 | if (0 <= selected_index && selected_index < this.containers.length) { | |
271 | this.select_page(selected_index); |
|
296 | this.select_page(selected_index); | |
272 | } |
|
297 | } | |
273 | } |
|
298 | } | |
274 | return TabView.__super__.update.apply(this); |
|
|||
275 | }, |
|
299 | }, | |
276 |
|
300 | |||
277 | select_page: function(index) { |
|
301 | select_page: function(index) { |
@@ -183,7 +183,7 b'' | |||||
183 | "cell_type": "markdown", |
|
183 | "cell_type": "markdown", | |
184 | "metadata": {}, |
|
184 | "metadata": {}, | |
185 | "source": [ |
|
185 | "source": [ | |
186 |
"If you need to display a more complicated set of widgets, there are **specialized containers** that you can use. To display **multiple sets of widgets**, you can use an **`Accordion` or a `Tab` in combination with one `Box` per set of widgets** (as seen below). The \"pages\" of these widgets are their children. To set the titles of the pages, one |
|
186 | "If you need to display a more complicated set of widgets, there are **specialized containers** that you can use. To display **multiple sets of widgets**, you can use an **`Accordion` or a `Tab` in combination with one `Box` per set of widgets** (as seen below). The \"pages\" of these widgets are their children. To set the titles of the pages, one can **call `set_title`**." | |
187 | ] |
|
187 | ] | |
188 | }, |
|
188 | }, | |
189 | { |
|
189 | { |
General Comments 0
You need to be logged in to leave comments.
Login now