0

I totally begin using RequireJS because I felt its usefulness but I'm still stuck in a simple programming problem: when I run out of scope (like when I am coding inside a jQuery callback'd function), I don't know the exact proper way to refer to where I was. I have an example: this code is in the src/dir of my project, I have jquery.js and require.js in lib/ .

// src/main.js

define(function() {
    return {
        setup: function(settings){
            this.settings = settings;
        },

        start: function(){
            this.initScr();
        },

        initScr: function(){
            var screen = $('<canvas>').attr({
                width: window.innerWidth,
                height: window.innerHeight
            });
            $('body').append(screen);
            this.DOM.screen = screen[0];
            $(window).resize(function(){
                require(['game/main'], function(game) {
                    console.log(this);
                    game.DOM.screen.width = window.innerWidth;
                    game.DOM.screen.height = window.innerHeight;
                });
            });
        },

        settings: {},
        DOM: {}
    };
});

The problem here is, when in my "module", specifically in a jQuery callback here, how can I change a property of the module's object from this callback? I can't use the "this" keyword here because it's no more the one that I want. What is the best solution? What I did here with the require make me feel really strange.

Thanks for reading

Edit:

Finally, I did that, helped by pax162 's answer.

define(function() {
    var initScr =  function(){
                var screen = $('<canvas>').attr({
                    width: window.innerWidth,
                    height: window.innerHeight
                });
                $('body').append(screen);
                DOM.screen = screen[0];
                $(window).resize(function(){
                    DOM.screen.width = window.innerWidth;
                    DOM.screen.height = window.innerHeight;
                });
            };

    var start = function(){
                initScr();
            };

    var setup = function(settings1){
                settings = settings1;
            };

    var settings = {};

    var DOM = {};

    return {
            setup: setup,
            start: start,
            initScr:initScr,
            settings: settings,
            DOM: DOM
    };
});
6
  • What exactly do you want to change?
    – Oriol
    Oct 26, 2013 at 0:41
  • I'm not clear what you're trying to achieve, but loading a module inside a resize handler doesn't feel like the optimum way to go about it. What the user perceives as a single resize could trigger lots of resize events.
    – nnnnnn
    Oct 26, 2013 at 0:41
  • @Oriol I want to set my DOM.screen in my $(window).resize() , but I need a reference to the object, I think it's not optimal to use a require() here because I'm already in a module loaded by require().
    – Nelson Z.
    Oct 26, 2013 at 0:45
  • @nnnnnn I'm am even not sure if the module will be loaded again... will it be ? I thought RequireJS load the first time but since it's the second require() of 'game/main' ? Edit: Actually, yes, the module is not loaded again in memory, it is the same, because I see the same DOM.screen in the require(), so I'm not "loading" the module again, i just want a reference to it, but I don't know if it is a good way to do
    – Nelson Z.
    Oct 26, 2013 at 0:53
  • But what if the user doesn't resize the window at all? Then the module will never be loaded. It just seems an odd place to do it.
    – nnnnnn
    Oct 26, 2013 at 1:12

2 Answers 2

0

You can do this, and keep the scope:

define(function() {




var initScr =  function(){
            var screen = $('<canvas>').attr({
                width: window.innerWidth,
                height: window.innerHeight
            });
            $('body').append(screen);
            DOM.screen = screen[0];
            $(window).resize(function(){
                require(['game/main'], function(game) {
                    //console.log(this);
                    game.DOM.screen.width = window.innerWidth;
                    game.DOM.screen.height = window.innerHeight;
                });
            });
        };

var start = function(){
            initScr();
        };

var setup = function(settings1){
            settings = settings1;
        };

var settings = {};

var DOM = {};

    return {
        setup: setup,
        start: start,
        initScr:initScr,
        settings: settings,
        DOM: DOM
    };
});
1
  • Thank you @pax162 , but now the problem is that "this" is referring to the window object inside the initScr method, not the module's object.
    – Nelson Z.
    Oct 26, 2013 at 1:04
0

With Javascript 1.8.5 or higher, Function.prototype.bind is the solution I prefer. The documentation says that bind:

Creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

In your case, your original code could be modified so that the resize handler is set like this:

$(window).resize(function(){
    this.DOM.screen.width = window.innerWidth;
    this.DOM.screen.height = window.innerHeight;
}.bind(this));

At the time bind is called this has the value you want. Upon resize, the return value of bind will be called, which is a function for which this is bound to the value you wanted it to have.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.