如何制作我可以包含在backbone.js项目中的配置文件

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

Have you considered using inheritance to overcome this problem? Instead of a config you could have a BaseView that has the aforementioned properties as view options . This way, these values could be overwritten in the implementation of your child view, or parsed in during construction of the child view.

Here's a crude example:

var BaseView = Backbone.View.extend({
    initialize: function() {
        this.options = {
            'Example': 'Foobar',
            'OverrideMe': 'Moo'
        };
    }
})

, ChildView = BaseView.extend({
    initialize: function() {
        this.options.Example = 'Something else';  
    }
})

, impl = new ChildView({'OverrideMe': 'Another thing'});

Here's a fiddle that shows it working.

Answer 2

If I understood you, i suggest You use Model defaults , and here you can see simple example. Or you can use your config like json object, but by the way you must to create empty Model and set config json to model(=new Model)

Answer 3

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/