How to make a config file which I can include in my backbone.js project

Question

I want to make a default config file according to which I will create my view.

I am thinking of something like:

var Application = {};
Application.Config = {
   ViewerModule : {
     width    : '60%',
     height   : '60%',
     maxWidth : '99%',
     minWidth : '1%',
     iconSize : '24*24',
     defaultColor   : 'Green',
     selectedColor  : 'Orange',
     fontColor      : 'Black',
     viewerToolColor: 'White',
     defaultView    : 'Fit To Screen',
     Labels:{
            btnZoomIn     :'Zoom In',
            btnZoomOut    :'Zoom Out',
            btnRotateLeft :'Rotate Left',
            btnRotateRight:'Rotate Right',
            btnFitToScreen:'Fit to Screen',
            btnFullScreen :'Full Screen',
            btnSaveAs     :'Zoom In',
            btnExport     :'Zoom Out',
            btnPopOut     :'Rotate Left',
            btnEmail      :'Rotate Right',
            btnPdfConverter:'Fit to Screen',
            btnSetting    :'Settings'           
     }
   }
}

And so when I create my view in backbone, I can use this config value to define default values of my Backbone View.

One thing I thought was save values from config file to a backbone model and create a view with that model.

However, I am not sure if this is the right thing.

Can share me your thoughts or examples on how I can achieve it.

Answer 1

You could mix in your config object into the prototype of your view with _.defaults if you want to set defaults for your views, with _.extend if you prefer to force the values.

For example,

var Application = {};
Application.Config = {};
Application.Config.ViewerModule = {
    width: '60%',
    height: '60%'
};

var V = Backbone.View.extend({
    width: '50%'
});
_.defaults(V.prototype, Application.Config.ViewerModule);

var v = new V();
console.log(v.width, v.height);

And a demo http://jsfiddle.net/nikoshr/VX7SY/