{"id":795,"date":"2022-08-30T15:07:18","date_gmt":"2022-08-30T15:07:18","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/using-properties-defined-in-the-options-constructor-within-custom-methods-in-mootools-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:07:18","modified_gmt":"2022-08-30T15:07:18","slug":"using-properties-defined-in-the-options-constructor-within-custom-methods-in-mootools-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/using-properties-defined-in-the-options-constructor-within-custom-methods-in-mootools-collection-of-common-programming-errors\/","title":{"rendered":"Using properties defined in the Options constructor within custom methods in mootools-Collection of common programming errors"},"content":{"rendered":"

I’m starting with the Mootools framework. Since I want the code to be reusable, I’m trying to do it with classes.<\/p>\n

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<\/code> object.<\/p>\n

var Map = new Class({\n\nImplements : [ Options ],\n\npathsArr: {},\n\nOptions: {\n    canvas: {\n        container: 'map',\n        cheight: 500,\n        cwidth: 900,\n    },\n    attributes: {\n        fill: '#006699',\n        stroke: '#3899E6',\n        'stroke-width': 1,\n        'stroke-linejoin': 'round'\n    }   \n},\n\ninitialize: function (pathsArr, options){\n    this.setOptions(Options);\n    this.pathsArr = paths;\n    console.log(this.pathsArr);\n},\n\nsetCanvas: function(){\n    console.log(this.Options.canvas);\n    R = Raphael(this.Options.canvas.container, this.Options.canvas.cwidth, this.Options.canvas.cheight);\n    return R;\n},\n\ndrawPaths: function(){\n    console.log(this.Options.attributes);\n    for (var country in this.pathsArr){\n        var shape = R.path(this.pathsArr[country].path);\n        var attri = this.Options.attributes;\n        console.log(attri);\n\n    }\n}\n<\/code><\/pre>\n
});<\/p>\n
Ok, like you can see I’m using console.log<\/code> to understand how things are happening here. And when I check the attributes in the line<\/p>\n
console.log(this.Options.attributes);\n<\/code><\/pre>\n
I get this in the Google Chrome console<\/p>\n
<\/p>\n
When I think I need something like what happend when I check the pathsArr<\/code> wich is outside the Options<\/code> object.<\/p>\n
<\/p>\n
And where I need the attributes property nothing happens. Like in these two lines.<\/p>\n
var attri = this.Options.attributes;\nshape.attr(attri);\n<\/code><\/pre>\n
And I don’t understand why if I do this, it gets the correct result.<\/p>\n
console.log(this.Options.attributes.fill);\n<\/code><\/pre>\n
Well, this is it, I’m stuck with this and I hope someone can explain to me why this is happening. Thank you!!<\/p>\n
    \n
  1. \n
    Javascript is case-sensitive. Use setOptions(options)<\/code> and this.options<\/code> instead of Options<\/code>. The capital O<\/code> is there only when a reference is made to the Options<\/code> mutator, as in the Implements: [Options]<\/code> instruction.<\/p>\n
    Currently, your Options<\/code> member can not be set by the setOptions<\/code> call, since it is looking for this.options<\/code>.<\/p>\n
    You’re only using this.Options<\/code>, that is your default options, that are never updated. And this.options<\/code> is set to the Options<\/code> mutator, as you instruct when writing this.setOptions(Options)<\/code>.<\/p>\n
    EDIT:<\/em><\/p>\n
    Also, in the following code:<\/p>\n
    initialize: function (pathsArr, options){\n    this.setOptions(Options);\n    this.pathsArr = paths;  \/\/<\/code><\/pre>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-09 22:45:56. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-795","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=795"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/795\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}