Using properties defined in the Options constructor within custom methods in mootools-Collection of common programming errors

2 years ago

admin

2 minutes

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

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

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);

Well, this is it, I’m stuck with this and I hope someone can explain to me why this is happening. Thank you!!

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;  //
```

Originally posted 2013-11-09 22:45:56.