Add component-model (Line Chart example code included)

@olarosling and @arthurcamara1: I was thinking about our conversation on Friday with  and came  up with this solution that does not need major change in vizabi to achieve our separation of models at tool level and component level.

Here is an overview:

At tool level (line-chart, for example), we pass the state only:

            this.addComponent('_gapminder/line-chart', {
                placeholder: '.vizabi-tool-viz',
                state: options.state
            });

Now, at a component level (line-chart), we add a line chart model, that holds an abstraction of the underneath models that each component (here, line chart needs):

            var LineChart = Component.extend({
                    init: function(context, options) {
                        this.name = 'line-chart';
                        this.template = 'components/_gapminder/' + this.name + '/' + this.name;
                        this.tool = context;
                        // HERE, create the model
                        this.model = new LineChartModel(options.state);
                        this._super(context, options);
                    },
            };

Here is the code for line-chart-model that extends a base class called ComponentModel.

            var LineChartModel = ComponentModel.extend({
                    init: function(state) {
                        this.timeModel = new TimeModel(state.time);
                        this.showModel = new ShowModel(state.show);

                        this._super();
             }, ...
            });

Component-model can exist to keep the common base methods (just like tool component). ComponentModel will extend the base generic model class:

            // HERE COMMON METHODS CAN EXIST FOR EXTENDING
                var ComponentModel = Model.extend({
                    init: function() {
                        this._super();
                    }

                });

And finally, TimeModel and ShowModel look something like the following:

	var timeModelAttrs = {
		timeRange: ["1990-2012"],
                time: 2007,
	};
    
       var TimeModel = Model.extend({
                    init: function() {
                        this._super();
                    },

                    setAttr: function(attr, val) {
                   timeModelAttrs[attr] = val;
          }
    });