Product API example using Backbone.js Models, Views and Collections

bootstrap.js

// bootstrap
PX.app = new PX.App();
Backbone.history.start();

product-template.html

<script type="text/template" id="product-template">
    <p><a href="products/{{_id}}">{{title}}</a></p>
    <p>{{description}}</p>
    <p>ID: {{_id}}</p>
</script>

product_collection.js

PX.ProductList = Backbone.Collection.extend({
    model: PX.Product,
    url: '/api/products',
    initialize: function () {
        this.fetch({
            success: this.fetchSuccess,
            error: this.fetchError
        });
        this.deferred = new $.Deferred();
    },
    deferred: Function.constructor.prototype,
    fetchSuccess: function (collection, response) {
        collection.deferred.resolve();
    },
    fetchError: function (collection, response) {
        throw new Error("Products fetch did get collection from API");
    }
});

PX.products = new PX.ProductList();

product_list_item_view.js

PX.ProductListItemView = Backbone.View.extend({
    tagName: "li",
    className: "product",
    initialize: function (options) {
        this.template = $('#product-template').html();
    },
    render: function () {
        var markup = Mustache.to_html(this.template, this.model.toJSON());
        this.$el.html(markup).attr('id',this.model.get('_id'));
        return this;
    }
});

product_list_view.js

PX.ProductListView = Backbone.View.extend({
    tagName: "ul",
    className: "products",
    render: function () {
        for (var i = 0; i < this.collection.length; i++) {
            this.renderItem(this.collection.models[i]);
        };
        $(this.container).find(this.className).remove();
        this.$el.appendTo(this.options.container);
        return this;
    },
    renderItem: function (model) {
        var item = new PX.ProductListItemView({
            "model": model
        });
        item.render().$el.appendTo(this.$el);
    }
});

product_model.js

// model
PX.Product = Backbone.Model.extend({
    defaults: {
        title: null,
        description: null
    }
});

product_router.js

PX = window.PX || {};
// application
PX.App = Backbone.Router.extend({
    routes: {
        "/": "listProducts",
        "list": "listProducts"
    },
    //initialize: function (options) {},
    listProducts: function () {
        var productsList = new PX.ProductListView({
            "container": $('#container'),
            "collection": PX.products
        });
        PX.products.deferred.done(function () {
            productsList.render();
        });
    }
});