Show More
@@ -29,10 +29,10 b' define([' | |||
|
29 | 29 | .attr('id', guid) |
|
30 | 30 | .addClass('panel-group'); |
|
31 | 31 | this.model.on('change:selected_index', function(model, value, options) { |
|
32 |
this.update_selected_index( |
|
|
32 | this.update_selected_index(options); | |
|
33 | 33 | }, this); |
|
34 | 34 | this.model.on('change:_titles', function(model, value, options) { |
|
35 |
this.update_titles( |
|
|
35 | this.update_titles(options); | |
|
36 | 36 | }, this); |
|
37 | 37 | this.on('displayed', function() { |
|
38 | 38 | this.update_titles(); |
@@ -40,14 +40,23 b' define([' | |||
|
40 | 40 | this.children_views.update(this.model.get('children')); |
|
41 | 41 | }, |
|
42 | 42 | |
|
43 | update_titles: function(titles) { | |
|
43 | /** | |
|
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. | |
|
48 | */ | |
|
49 | update: function(options) { | |
|
50 | this.update_titles(); | |
|
51 | this.update_selected_index(options); | |
|
52 | return TabView.__super__.update.apply(this); | |
|
53 | }, | |
|
54 | ||
|
55 | update_titles: function() { | |
|
44 | 56 | /** |
|
45 | 57 | * Set tab titles |
|
46 | 58 | */ |
|
47 | if (!titles) { | |
|
48 | titles = this.model.get('_titles'); | |
|
49 | } | |
|
50 | ||
|
59 | var titles = this.model.get('_titles'); | |
|
51 | 60 | var that = this; |
|
52 | 61 | _.each(titles, function(title, page_index) { |
|
53 | 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 | 74 | * Only update the selection if the selection wasn't triggered |
|
66 | 75 | * by the front-end. It must be triggered by the back-end. |
|
67 | 76 | */ |
|
68 | 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 | 80 | this.containers[old_index].find('.panel-collapse').collapse('hide'); |
|
70 | 81 | if (0 <= new_index && new_index < this.containers.length) { |
|
71 | 82 | this.containers[new_index].find('.panel-collapse').collapse('show'); |
@@ -211,7 +222,6 b' define([' | |||
|
211 | 222 | var tab = $('<li />') |
|
212 | 223 | .css('list-style-type', 'none') |
|
213 | 224 | .appendTo(this.$tabs); |
|
214 | ||
|
215 | 225 | |
|
216 | 226 | var tab_text = $('<a />') |
|
217 | 227 | .attr('href', '#' + uuid) |
@@ -235,6 +245,7 b' define([' | |||
|
235 | 245 | .append(dummy) |
|
236 | 246 | .appendTo(that.$tab_contents); |
|
237 | 247 | |
|
248 | this.update(); | |
|
238 | 249 | return this.create_child_view(model).then(function(view) { |
|
239 | 250 | dummy.replaceWith(view.$el); |
|
240 | 251 | view.parent_tab = tab; |
@@ -243,6 +254,7 b' define([' | |||
|
243 | 254 | // Trigger the displayed event of the child view. |
|
244 | 255 | that.after_displayed(function() { |
|
245 | 256 | view.trigger('displayed'); |
|
257 | that.update(); | |
|
246 | 258 | }); |
|
247 | 259 | return view; |
|
248 | 260 | }).catch(utils.reject("Couldn't add child view to box", true)); |
@@ -255,23 +267,35 b' define([' | |||
|
255 | 267 | * Called when the model is changed. The model may have been |
|
256 | 268 | * changed by another view or by a state update from the back-end. |
|
257 | 269 | */ |
|
258 | if (options === undefined || options.updated_view != this) { | |
|
259 | // Set tab titles | |
|
260 | var titles = this.model.get('_titles'); | |
|
261 | var that = this; | |
|
262 | _.each(titles, function(title, page_index) { | |
|
263 | var tab_text = that.containers[page_index]; | |
|
264 | if (tab_text !== undefined) { | |
|
265 | tab_text.text(title); | |
|
266 | } | |
|
267 | }); | |
|
270 | this.update_titles(); | |
|
271 | this.update_selected_index(options); | |
|
272 | return TabView.__super__.update.apply(this); | |
|
273 | }, | |
|
268 | 274 | |
|
275 | /** | |
|
276 | * Updates the tab page titles. | |
|
277 | */ | |
|
278 | update_titles: function() { | |
|
279 | var titles = this.model.get('_titles'); | |
|
280 | var that = this; | |
|
281 | _.each(titles, function(title, page_index) { | |
|
282 | var tab_text = that.containers[page_index]; | |
|
283 | if (tab_text !== undefined) { | |
|
284 | tab_text.text(title); | |
|
285 | } | |
|
286 | }); | |
|
287 | }, | |
|
288 | ||
|
289 | /** | |
|
290 | * Updates the tab page titles. | |
|
291 | */ | |
|
292 | update_selected_index: function(options) { | |
|
293 | if (options === undefined || options.updated_view != this) { | |
|
269 | 294 | var selected_index = this.model.get('selected_index'); |
|
270 | 295 | if (0 <= selected_index && selected_index < this.containers.length) { |
|
271 | 296 | this.select_page(selected_index); |
|
272 | 297 | } |
|
273 | 298 | } |
|
274 | return TabView.__super__.update.apply(this); | |
|
275 | 299 | }, |
|
276 | 300 | |
|
277 | 301 | select_page: function(index) { |
@@ -183,7 +183,7 b'' | |||
|
183 | 183 | "cell_type": "markdown", |
|
184 | 184 | "metadata": {}, |
|
185 | 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