Using properties defined in the Options constructor within custom methods in mootools

Question

I'm starting with the Mootools framework. Since I want the code to be reusable, I'm trying to do it with classes.

In the code shown below, the intention is to draw a Map using Raphael framework for SVG. The code is working fine, but I'm having problems with the properties that are inside the Options object.

var Map = new Class({

Implements : [ Options ],

pathsArr: {},

Options: {
    canvas: {
        container: 'map',
        cheight: 500,
        cwidth: 900,
    },
    attributes: {
        fill: '#006699',
        stroke: '#3899E6',
        'stroke-width': 1,
        'stroke-linejoin': 'round'
    }   
},

initialize: function (pathsArr, options){
    this.setOptions(Options);
    this.pathsArr = paths;
    console.log(this.pathsArr);
},

setCanvas: function(){
    console.log(this.Options.canvas);
    R = Raphael(this.Options.canvas.container, this.Options.canvas.cwidth, this.Options.canvas.cheight);
    return R;
},

drawPaths: function(){
    console.log(this.Options.attributes);
    for (var country in this.pathsArr){
        var shape = R.path(this.pathsArr[country].path);
        var attri = this.Options.attributes;
        console.log(attri);
        
    }
}

});

Ok, like you can see I'm using console.log to understand how things are happening here. And when I check the attributes in the line

console.log(this.Options.attributes);

I get this in the Google Chrome console

enter image description here

When I think I need something like what happend when I check the pathsArr wich is outside the Options object.

enter image description here

And where I need the attributes property nothing happens. Like in these two lines.

var attri = this.Options.attributes;
shape.attr(attri);

And I don't understand why if I do this, it gets the correct result.

console.log(this.Options.attributes.fill);

MattiSG · Accepted Answer · 2011-11-13 20:32:57Z

3

Javascript is case-sensitive. Use setOptions(options) and this.options instead of Options. The capital O is there only when a reference is made to the Options mutator, as in the Implements: [Options] instruction.

Currently, your Options member can not be set by the setOptions call, since it is looking for this.options.

You're only using this.Options, that is your default options, that are never updated. And this.options is set to the Options mutator, as you instruct when writing this.setOptions(Options).

EDIT:

Also, in the following code:

initialize: function (pathsArr, options){
    this.setOptions(Options);
    this.pathsArr = paths;  // <----- `paths` is undefined

edited Nov 13, 2011 at 20:32

answered Nov 13, 2011 at 19:56

MattiSG

4,1561 gold badge23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

limoragni Over a year ago

Wow, that was a complete answer! Grammar correction + an answer to the problem. Thank you so much! I'm learning english and JavaScript programming at the same time!

Collectives™ on Stack Overflow

Using properties defined in the Options constructor within custom methods in mootools

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related