soma several instance (coupon example)

gistfile1.js

// Code goes here

window.widgets = window.widgets || {};
window.widgets.coupons9 = window.widgets.coupon9 || {};

(function(ns, soma) {
  
    'use strict';
 
    var CouponsMediator = function(target, dispatcher, dataService, couponsTemplate) {
        var coupons = null;
 
        function init() {
            dispatcher.addEventListener('initComplete', function(event) {
                getCouponData();
            });
        }
 
        function getCouponData() {
            dataService.get(function(data) {
                coupons = data;
                dispatcher.dispatch("couponsReady", coupons);
            });
        }
 
        init();
    };
 
    ns.couponsMediator = CouponsMediator;
 
})(window.widgets.coupons9, soma);
 
 
/*global soma:false*/
(function(ns, soma) {
 
    'use strict';
 
    var DataService = function() {
        function get(cb) {
            var data = {
                items: [
                    {
                        id: 1,
                        code: "code1",
                        url: "http://google.com",
                        title: "title1",
                        description: "description1"
                    },
                    {
                        id: 2,
                        code: "code2",
                        url: "http://google.com",
                        title: "title2",
                        description: "description2"
                    },
                    {
                        id: 3,
                        code: "code3",
                        url: "http://google.com",
                        title: "title3",
                        description: "description3"
                    },
                    {
                        id: 4,
                        code: "code4",
                        url: "http://google.com",
                        title: "title4",
                        description: "description4"
                    },
                    {
                        id: 5,
                        code: "code5",
                        url: "http://google.com",
                        title: "title5",
                        description: "description5"
                    }
                ]
            };
 
            cb(data);
        }
 
        return {
            get: get
        }
    }
 
    ns.dataService = DataService;
 
})(window.widgets.coupons9 , soma);
 
/*global soma:false*/
(function(ns, soma) {
 
    'use strict';
    var CouponsTemplate = function(template, scope, element, dispatcher, dataService) {
 
        function init() {
            dispatcher.addEventListener('couponsReady', handleCouponsReady.bind(this));
        }
 
        function handleCouponsReady(event) {
            scope.coupons = event.params;
            scope.title = "Title for instance 9";
 
            scope.clickHandler = function(event, id) {
                console.log('COUPON CLICKED', id, event.currentTarget);
                console.log('COUPON DATA', scope.coupons);
                console.log('COUPON', id, scope.coupons.items[id]);
                scope.coupons.items[id].title = id+"clicked!";
                template.render();
            }
 
            template.render();
        };
 
        init();
    };
 
    ns.couponsTemplate = CouponsTemplate;
 
})(window.widgets.coupons9 , soma);
 
/*global soma:false*/
(function(ns, soma) {
 
    'use strict';
    var appDOMId = "SF_COUPONS_APP"+9;
 
    var CouponsApp = soma.Application.extend({
        constructor: function(element) {
            this.element = element;
            soma.Application.call(this);
        },
        init: function() {
            //map dependency injection:
            this.injector.mapClass('dataService', ns.dataService, true);
 
            // coupons mediator
            this.mediators.create(ns.couponsMediator, this.element);
 
            // coupons template
            this.createTemplate(ns.couponsTemplate, this.element);
        },
        start: function() {
            this.dispatcher.dispatch('initComplete');
        }
    });
 
    //create dom root element
    var rootDOM = document.createElement("DIV");
    rootDOM.setAttribute('id', appDOMId);
    rootDOM.style.width = "200px";
    rootDOM.style.minHeight = "100px";
    rootDOM.style.padding = "10px";
    rootDOM.style.margin = "50px";
    rootDOM.style.border="1px solid #333";
    rootDOM.style.backgroundColor = "#999999";
 
    rootDOM.innerHTML = '<div>{{title}}</div> <div style="margin:5px;" data-repeat="coupon in coupons.items"> <button data-click="clickHandler($index)"> go </button> {{$index}}:  {{coupon.id}} - {{coupon.title}} </div>';
 
    document.body.appendChild(rootDOM);
 
    var couponsApp = new CouponsApp(document.getElementById(appDOMId));
 
})(window.widgets.coupons9 , soma);