Display of dependent data on the example of cascading drop-down lists

Sometimes there are interesting tasks that are difficult to write the first time. One of these tasks turned out to be cascading lists and, with a light comment, I figured that I could write shorter on Backbone.

In short, it did not work out ... Partly due to the fact that I complicated the task to endlessly drop-down lists and because of the small verbosity of Backbone.

Draw two circles ...

A little thought in my head appears about this block diagram:

When designing interfaces, I always start with the smallest details, in the case of a list, it is an option and a SelectItemView view that SelectItemView it. Next, the elements form a list, and the lists form what we need - the base BaseView .

The task is to make infinitely added lists and to solve it you can use something like a linked list for HTML:

 <script type="text/template" id="base-tempate"> <div class="primary"><!-- SelectView --></div> <div class="secondary"><!--  BaseView,   --></div> </script> 

.secondary will be recursively .secondary to the .secondary container, and when the active element .primary will clear the .secondary and render the new list.
')

... And finish the rest of the owl

After almost two hours I received about this demo . The code is quite simple and clear, I did not find what can be explained there for a long time.

Interesting moments

1. In order not to recall which items have a nested list, the “>” icon is added to the label in the ItemModel model constructor:

  initialize: function(){ if(this.get('items').length > 0){ this.set('label', this.get('label') + ' >'); } 

2. After changing the selected item, you need to find a model that is responsible for it. To solve the problem, we had to make an itemViews array of itemViews views that were rendered:

  changeItem: function(){ u.each(this.itemViews, function(view){ if(view.el === this.el.options[this.el.selectedIndex]){ this.collection.selectedModel = view.model; this.collection.trigger('changeSelectedItem'); } }, this); }, 

3. The above code sends a changeSelectedItem signal that catches BaseView and tries to render a secondary list if there is a necessary collection:

  renderSecondary: function(){ var collection = this.collection.selectedModel.itemsCollection; var container = this.$el.find('.secondary'); container.empty(); if(collection) (new BaseView({ collection: collection })).render().$el.appendTo(container); } 

Code Explanation

All the code is in this wrapper:

 (function(j, b, u){ // j - jQuery // b - Backbone // u - Underscope })(jQuery.noConflict(), Backbone.noConflict(), _.noConflict());​ 

Usually I write a wrapper a bit more complicated, but in this case all the code is in one file and that is enough. I do not ask in advance not to criticize the cuts, it is more convenient for me and it is easier to read than all sorts of dollars and lower dashes.

Conclusion

Every time I work with Backbone, the accuracy of the received code pleases. Although, perhaps this is just for me, it turns out neat?