Gapminder/vizabi — pull request #19 by ambodi (2014-10-19 22:14:43+00:00)
Title: 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;
}
});