Many to Many

The First Argument -- Pull Data or Driven by Data?

Driven by Data Style

init:function(){
                            Dispatcher.on('clickBtnCompare.Foo',this.addSeries);
                            },
                            destroy:function(){
                            Dispatcher.off('clickBtnCompare.Foo');
                            }

Pull Data Style

clickBtnCompare:function(){
                            AppCube.DataRepository.fetchNew(storeName).done(function(data){
                            chart.addSeries(data);
                            });
                            }

How about add more one Action?

someTimes:function(){
                            Dispatcher.on('clickBtnCompare.Foo',this.anotherAction);
                            }

Provide fetch and notify API

N(View):1(Model) use notify

1(View):N(Model or State) use fetch

fetch:function(key,state,options){
                            var store = this._store_list[key];
                            return store.getState(state,options);
                            },
                            fetchNew:function(key,options){
                            var store = this._store_list[key];
                            return store.refreshData(options,true);
                            },
                            refresh:function(key,options){
                            var store = this._store_list[key];
                            store.refreshData(options).done(function(res){
                            Dispatcher.trigger('refresh:'+key,res,'Component');
                            });
                            }

Store

The Second Argument -- the Origin Data after Update

task.defer.promise.done(function(){
                            var i = 0;
                            while(typeof self._resultStack[i] != 'undefined'){
                            task._configure(self._resultStack[i].options);
                            task.result = self._resultStack[i].result;
                            //defer saved in callbackStack
                            self._callbackStack[i].resolve(self._resultStack[i].result);
                            self._callbackStack[i] = undefined;
                            i++;
                            }
                            });

Layout&Container&Component

'newusers':{
                            constructor:BasicLayout,
                            root:'#analytics-newusers',
                            //defaultState:'default',
                            //stateRoot:'',
                            //template:'',
                            state:{
                            'default':{
                            container:AnalyticsContainer,
                            //root:'.root2',
                            //template:'<div>container 2<div class="root2"></div></div>',
                            components:[{
                            name:'chart1',
                            constructor:BasicChart,
                            factory:CombineChartFactory,
                            options:{
                            title:'New Users',
                            stateName:'chart',
                            compared:true,
                            stats:"data",
                            ranges:7,
                            default_time_unit:1,
                            time:[
                            {name:"Hourly",value:"hourly",length:1},
                            {name:"Daily",value:"daily",length:1},
                            {name:"Weekly",value:"weekly",length:7},
                            {name:"Monthly",value:"monthly",length:30}
                            ],
                            options: C.get('UI.Chart')
                            },
                            extend:{
                            store:Store,
                            storeName:"Analytics:NewUser",
                            taskConstructor:AnalyticsTask,
                            task:{
                            url: 'Analytics.LoadData',
                            params:{
                            stats:'installations'
                            },
                            ranges:7
                            }
                            }
                            }
                            }
                            }

Component Factory

createComponent:function(){
                            //create new store
                            //set generator
                            ...
                            options.options.storeName = storeName;
                            var component = new Component(options.options);
                            if(component.init)component.init();
                            //control the initialize of view

                            return component;
                            }

Component Example

init:function(){
                            var storeName = this.options.storeName;
                            Dispatcher.on('timeChange',this.setTimeUnit,this,'Component');
                            Dispatcher.on('refresh:'+storeName,this.renderComponent,this,'Component');
                            Dispatcher.on('Request.getParams',this.getParams,this,'Chart');
                            }

render:function(){
                            this.$('.chart-content').highcharts(this.options.options);
                            this.initChart();
                            this.refresh();
                            },
                            renderComponent:function(){
                            AppCube.DataRepository.fetch(storeName,stateName,this.options.stats).done(function(res){
                            self.renderChart(res);
                            });
                            },

var store = extend.store.create({
                            name:storeName,
                            generator:function(options,taskOptions){
                            var chart = Dispatcher.request('getParams',{},'Chart');
                            var params = _.extend({},taskOptions.params,options,chart);
                            //todo fetch params

                            return {
                            formatter:null,
                            params: params
                            }
                            }
                            });