gistfile1.js

(function(j, b, u){
    var ItemModel = b.Model.extend({
        itemsCollection: null,
        
        defaults: {
            label: '-',
            items: [],
            selected: false
        },
        
        initialize: function(){
            if(this.get('items').length > 0){
                this.set('label', this.get('label') + ' >');
                this.itemsCollection = new ItemsCollection(this.get('items'));
            }
        }
    });
    
    var ItemsCollection = b.Collection.extend({
        model: ItemModel,
        selectedModel: null,

        initialize: function(){
            this.on('reset', this.setupDefaultProperties, this);
            this.setupDefaultProperties();
        },
        
        setupDefaultProperties: function(){
            this.selectedModel = this.at(0) || new this.model;
            this.trigger('changeSelectedItem');
        }
    });
    
    var ItemSelectView = b.View.extend({
        tagName: 'option',
        
        render: function(){
            this.$el.html(this.model.get('label'));
            return this;
        }
    });
    
    var SelectView = b.View.extend({
        tagName: 'select',
        itemViews: [],
        
        events: {
            'change': 'changeItem'
        },
        
        initialize: function(options){
            this.template = u.template(j('#base-tempate').html());
            this.collection.on('reset', this.render, this);
        },
        
        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);
        },
        
        renderOne: function(model){
            var view = new ItemSelectView({ model: model });
            
            this.itemViews.push(view);
            this.$el.append(view.render().$el);
        },
        
        render: function(){
            this.$el.html(this.template());
            this.itemViews = [];
            this.collection.each(this.renderOne, this);
            
            return this;
        }
    });
    
    var BaseView = b.View.extend({
        template: null,
        
        initialize: function(options){
            this.template = u.template(j('#base-tempate').html());
            this.primarySelect = new SelectView(options);            
            this.collection.on('changeSelectedItem', this.renderSecondary, this);
        },
        
        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);
        },
        
        render: function(){
            this.$el.html(this.template({}));
            this.$el.find('.primary').append(this.primarySelect.render().$el);
            
            return this;
        }
    });
    
    j(function(){
        var collection = new ItemsCollection;
        var view = new BaseView({ collection: collection });
        
        view.render().$el.appendTo('body');
        
        collection.reset([{
            label: '1',
            items: [{
                label: '1 - 1'
            }, {
                label: '1 - 2',
                items: [{
                    label: '1 - 2 - 1'
                }, {
                    label: '1 - 2 - 2',
                    items: [{
                        label: '1 - 2 - 2 - 1',
                    }, {
                        label: '1 - 2 - 2 - 2',
                    }]
                }, {
                    label: '1 - 2 - 3'
                }]
            }]
        }, {
            label: '2',
            items: [{
                label: '2 - 1'
            }, {
                label: '2 - 2'
            }, {
                label: '2 - 3'
            }]
        }]);
    });
})(jQuery.noConflict(), Backbone.noConflict(), _.noConflict());​