modelingBackbone

var Product =  Backbone.Model.extend({
});

var Products = Backbone.Collection.extend({
    model: Product
});

var Category = Backbone.Model.extend({
    initialize: function() {
        _.bindAll(this, "url");
    },
    url: function() {
        return '/api/categories/'+ this.get('title');
    }
});

var Categories = Backbone.Collection.extend({
    model: Category,
    url: '/api/categories'
});


var CategoryTitleView = Backbone.View.extend({
    tagName:'li',
    initialize: function() {
        _.bindAll(this, "render","showCategory");
    },
    events: {
      "click": "showCategory"
    },
    render: function(){
        this.$el.html(this.model.get('title'));
        return this;
    },
    showCategory: function(){
        var categoryView = new CategoryView({ model: this.model})
    }
});


var CategoryListView =  Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        this.root = $('body');
        _.bindAll(this, "render");
        this.collection = new Categories();
        this.collection.fetch({
            success: this.render
        });
    },
    render: function() {
        this.$el.empty();
        var that = this;
        this.$el.append('<h3>Categories</h3>');
        this.collection.each(function(category){
            var categoryTitleView = new CategoryTitleView({
                model: category
            });
            that.$el.append(categoryTitleView.render().el);
        });
        this.root.empty();
        this.root.append(this.el);
        return this;
    }
});

var ProductView = Backbone.View.extend({
    tagName:'li',
    initialize: function() {
        _.bindAll(this, "render");
    },
    render: function(){
        this.$el.html(this.model.get('name'));
        return this;
    }
});
var CategoryView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        this.root = $('body');
        _.bindAll(this, "render");

        this.model.fetch({
            success: this.render
        });
    },
    render: function() {
        this.$el.empty();
        this.$el.append('<h3>'+this.model.get('title')+'</h3>');
        this.$el.append('<ul>');
        var products = new Products(this.model.get('products'));
        var that = this;
        products.each(function(product){
            var productView = new ProductView({model: product});
            that.$el.append(productView.render().el);
        });
        this.$el.append('</ul>');
        this.root.empty();
        this.root.append(this.el);
        return this;
    }
});

var categoryListView = new CategoryListView();