[SOLVED] How to grasp DOM and 'this.' in PlayCanvas - 'document.' versus 'window.'

[Premise: Some may have seen my previous threads* regarding ‘this.’ in JS (including PlayCanvas’ use of JS).]

Anyhow: I am getting into a trap, where I declare the following at ‘.initialize’:

uiWeSeTFQ.prototype.initialize = function () {
    // create STYLE element
    var style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);
    
    this.fontLink = document.createElement('link');
    this.fontLink.href = 'https://fonts.googleapis.com/css?family=Merriweather&display=swap';
    this.fontLink.rel = 'stylesheet';
    
    document.head.appendChild(this.fontLink);      
    this.counter = 0;       this.bindEvents();    

    window.addEventListener("resize", this.myRezFunction);    
};

{where 'window.addEventListener("resize", this.myRezFunction); ' have been tried as well}

  • below I have the ‘myRezFunction’ function:
uiWeSeTFQ.prototype.myRezFunction = function(){
    self = this;
    app = self.app;
    var fingPrMob_ent = this.app.root.findByName("FingPr_Mob");
};
  • which results in an error that complaints about ‘not compiling .root => .root as undefined

*) Rewrites in relation to the whole ‘this.’, ‘self.’ and ‘app = this.app / app = self.app’ does not work either:

uiWeSeTFQ.prototype.myRezFunction = function(){
    self = this;
    var fingPrMob_ent = self.app.root.findByName("FingPr_Mob");
};
uiWeSeTFQ.prototype.myRezFunction = function(){
    self = this;
    app = self.app;
    var fingPrMob_ent = app.root.findByName("FingPr_Mob");
};

Note: Can we please restrain from ‘truisms’ and off-course’ness in relation to understanding the DOM with a flick of a finger (as often mentioned: this forum’s user’s consists of many different levels from mainly graphics to mainly coders :slight_smile: )

Hi @Thomas_Due_Nielsen,

All Playcanvas code is regular JS, you just need to educate yourself on how method calling in context is used in Javascript.

Here you use a vanilla JS event, for the called function to use the script this context you need to call it using bind at the end:

window.addEventListener("resize", this.myRezFunction.bind(this));  

Now you can use this.app in your listener:

uiWeSeTFQ.prototype.myRezFunction = function(){
    var fingPrMob_ent = this.app.root.findByName("FingPr_Mob");
};

Search for a Javascript tutorial on anonymous method callbacks and the use of the bind keyword.

1 Like

Ok, it works - thx. The answer is very useful for ‘the general use’ of PlayCanvas (my personal PC-education is - as such - graduately progressing I guess). PS: I have previously been using .bind(this), but will try to use it more permanently in relation to [correct me if wrong] regular DOM-eventlisteners like window.

Still; while having future users in mind, I will argue that tutorials containing ‘how method calling in context is used in Javascript’ could save a lot of user-hours + combined forum-elaboration (generally this is already ‘pipelined/layed out’ - cf my threads with @yaustar on the subject of general improvements … not sure if pivotal to general knowledge, though. Might be considered; middle to higher knowledge tier).

All we would really do is refer to other tutorials about anonymous/lambda functions and context.

Along side with variable hoisting and functions as objects.

It’s not PlayCanvas specific but part of the naunce of JS.

I agree it is important though to highlight it.

2 Likes