var Widget = new Class({
options: { optionvalue: 'hello' },
initialize: function (element, options) {
this.element = document.id(el)
this.setOptions (options);
this.bound = {
click: this.clickHandler.bind(this)
}
},
widgetaction: function () {
var ev;
this.element.addEvent('click', this.bound.clickHandler);
},
clickHandler: function(e) {
if (e) e.stop()
this.element.setStyles({'color': 'red'}); //change the color of
'widgetlink'
this.options.optionvalue = 'world';
}
});
new Widget('widgetlink', {optionvalue: 'dude'})
On Apr 30, 2011, at 8:23 AM, hairbo wrote:
> I realize I may get laughed out of the gym for this question, given how long
> I've used Mootools now, but...
>
> For nearly every Mootools class I've ever written, I cannot seem to get away
> from needing to do this inside the class methods:
>
> var that = this;
>
> ...where "this" refers to the class object.
>
>
> Here's an example:
>
> var Widget = new Class({
>
> options: { optionvalue: 'hello' },
>
> initialize: function (options) {
> this.setOptions (options);
>
> },
>
> widgetaction: function () {
> var ev;
> var that = this;
> $('widgetlink').addEvent('click', function(e) {
> ev = new Event(e).stop();
> this.setStyles({'color': 'red'}); //change the color of
> 'widgetlink'
> that.options.optionvalue = 'world';
> });
> }
> });
> Widget.implement(new Options, new Events);
>
>
> I (mostly) understand the "bind" feature, but I don't think I can use it in
> my example above. If I bind "widgetaction()" with the Widget class, then I'm
> not sure I'd have any way to change the "widgetlink" element inside the
> function called with the onClick event.
>
> Does this question make sense? What almost certainly obvious and stupid
> thing am I missing?
>
> Thanks (and ducking) in advance.
