gistfile1.js

(function(j, b, u){
    var ItemsCollection = b.Collection.extend({
        setSelectedModel: function(model){
            this.each(function(model){
                model.set('selected', false);
            });
            
            model.set('selected', true);
            model.trigger('selected');
        },
        
        getSelectedModel: function(){
            return this.find(function(model){ return model.get('selected') }) || this.at(0);
        }
    });
    
    var ItemSelectView = b.View.extend({
        tagName: 'option',
        model: null,
        
        initialize: function(options){
            this.model = options.model;
        },
        
        render: function(){
            this.$el.html(this.model.get('label'));
            return this;
        }
    });
    
    var SelectView = b.View.extend({
        tagName: 'select',
        collection: null,
        itemViews: [],
        
        events: {
            'change': 'changeItem'
        },
        
        initialize: function(options){
            this.template = u.template(j('#base-tempate').html());
            this.collection = options.collection;
            this.collection.bind('reset add remove', this.render, this);
        },
        
        changeItem: function(){
            u.each(this.itemViews, function(view){
                if(view.el == this.$el.find('option:selected')[0])
                    this.collection.setSelectedModel(view.model);
            }, this);
            
            this.collection.trigger('changeSelectedItem');
        },
        
        render: function(){
            this.$el.html(this.template());
            
            this.collection.each(function(model){
                var view = new ItemSelectView({ model: model });
                
                this.itemViews.push(view);
                this.$el.append(view.render().$el);
            }, this);
            
            return this;
        }
    });
    
    var BaseView = b.View.extend({
        template: null,
        collection: null,
        
        initialize: function(options){
            this.template = u.template(j('#base-tempate').html());
            this.select = new SelectView(options);
            
            this.collection = options.collection;
            this.collection.on('changeSelectedItem', this.renderSecondary, this);
        },
        
        renderSecondary: function(){
            var selectedModel = this.collection.getSelectedModel();
            
            if(selectedModel && selectedModel.get('items')){
                var collection = new ItemsCollection;
                var view = new BaseView({ collection: collection });

                collection.reset(selectedModel.get('items'));
                this.$el.find('.secondary').empty().append(view.render().$el);
            }
        },
        
        render: function(){
            this.$el.html(this.template({}));
            this.$el.find('.primary').append(this.select.render().$el);
            this.renderSecondary();
            
            return this;
        }
    });
    
    j(function(){
        var collection = new ItemsCollection;
        var view = new BaseView({ collection: collection });
        
        collection.reset([{
            label: 'Item #1',
            items: [{
                label: 'Item #1 - Sub #1'
            }, {
                label: 'Item #1 - Sub #2',
                items: [{
                    label: 'Item #1 - Sub #2 - Sub #1'
                }, {
                    label: 'Item #1 - Sub #2 - Sub #2'
                }]
            }]
        }, {
            label: 'Item #2',
            items: [{
                label: 'Item #2 - Sub #1'
            }, {
                label: 'Item #2 - Sub #2'
            }, {
                label: 'Item #2 - Sub #3'
            }]
        }]);
        
        j('body').append(view.render().$el);
    });
})(jQuery.noConflict(), Backbone.noConflict(), _.noConflict());​