temp.js

define(
    [
        'underscore',
        'backbone',
        'common/view/baseView',
        // text! indicates that what "this" is referencing is a template
        'text!store/template/cartWidget.html'
    ],
    function ( _, Backbone, BaseView, tpl) {
        return BaseView.extend({
            template: _.template(tpl),


            initialize: function() {
                // Retrieve the keywords from caller
                var keywords = this.options.keywords;

                // Ask Jimmy to give you the data


                // Will eventually create model, currently using hard coded data
                var products = [];
                products.push(new CartProductModel({
                    title: 'chocolate chip cookies',
                    price: 5,
                    maxQuantityPerOrder: 10,
                    imageUrl: "http://www.laaloosh.com/wp-content/uploads/2009/02/chocolate-chip-cookies.thumbnail.jpg",
                    quantity: 2
                }));
                products.push(new CartProductModel({
                    title: 'chocolate brownies',
                    price: 10,
                    maxQuantityPerOrder: 10,
                    imageUrl: "http://kitchenslut.files.wordpress.com/2011/09/chocolate_brownies-5736.jpg?w=150",
                    quantity: 3
                }));

                this.model = new CartModel({
                    storeID: '123456789',
                    storeName: "Celia's Bakery",
                    paymentMethod: [0],
                    deliveryOptions: [0, 1],
                    itemTotal: 0,
                    shippingTotal: 0,
                    orderTotal: 0,
                    productsCollection: products
                });
            },

            serialize: function() {
                var products = [];
                _.each(this.model.get('productsCollection'), function (product) {
                    products.push({
                        title: product.get('title'),
                        price: product.get('price'),
                        imageUrl: product.get('imageUrl'),
                        quantity: product.get('quantity')
                    });
                });

                return {
                    storeID: this.model.get('storeID'),
                    storeName: this.model.get('storeName'),
                    paymentMethod: this.model.get('paymentMethod'),
                    deliveryOptions: this.model.get('deliveryOptions'),
                    itemTotal: this.model.get('itemTotal'),
                    shippingTotal: this.model.get('shippingTotal'),
                    orderTotal: this.model.get('orderTotal'),
                    productsCollection: products
                };
            },


            // A function to draw something on the screen
            /**
             * Renders the View in DOM
             *
             * @param {Object} containerEl
             * @return {*}
             */
            render: function(containerEl) {
                // We take the template, replace the "<%= %>" text with
                // variables provided to _.template, and convert it into
                // text

                // Template: Hello World, <%= name %>!
                // What we are passing in is:  name: 'Hung'
                // Output: Hello World, Hung!
                var me = this;

                // Renders data into element
                this.renderData();

                // Append data element to container
                if (containerEl) {
                    containerEl.append(me.$el);
                }

                return this.$el;
            },

            /**
             * Renders data
             *
             * @private
             */
            renderData: function(blah) {
                var data = this.serialize();

                // Pull data from model sources
                this.$el.html(this.template(data));
            }
        });
    }
);