topic Re: How to access function in require([]) in ArcGIS JavaScript Maps SDK Questions

How to access function in require([])

PHerk — Wed, 19 Feb 2020 11:53:30 GMT

This demo: Access ArcGIS Online items using OAuthentication - 4.13

is my starting sample to build my own application.

It uses require(), what seems to be requireJS.

I am new to that, sorry.

I want to set onclickhandlers in the example, so clicking on the thumbnail should open a new map.

How can I call a function in the scope of the require() statement, from an HTML element (onclick), that is outside the scope of the require() statement?

Help appreciated.

Re: How to access function in require([])

Egge-Jan_Pollé — Wed, 19 Feb 2020 12:24:58 GMT

Hi Piet van Herk,

Some background information on the use of require() to asynchronously load ArcGIS API for JavaScript classes into an application can be found here: Programming patterns | ArcGIS API for JavaScript 4.14

Would this be helpful to you?

BR,

Egge-Jan

Re: How to access function in require([])

PHerk — Wed, 19 Feb 2020 16:55:15 GMT

Hi Egge-Jan,

Thank you for your reply, but it did not provide an answer on my question, or, I do not understand.

Inside require(), the sample creates the carousel with maps. I would like to put a click handler on it, but that is only recognised if the function that it should call is placed outside require(). Just need to know how I can access a function inside require() from outside.

Re: How to access function in require([])

ReneRubalcava — Sat, 11 Dec 2021 12:05:20 GMT

I think I see what you're trying to do. In that sample, the gallery is built by appending text together. You can do something like this to add event listeners to those elements.

function createGallery(items) {
  // be sure to clean up any handlers
  cleanup();
  var htmlFragment = "";

  items.results.forEach(function(item) {
    htmlFragment +=
      '<div class="esri-item-container">' +
      (item.thumbnailUrl
        ? '<div class="esri-image" style="background-image:url(' +
          item.thumbnailUrl +
          ');"></div>'
        : '<div class="esri-image esri-null-image">Thumbnail not available</div>') +
      (item.title
        ? '<div class="esri-title">' + (item.title || "") + "</div>"
        : '<div class="esri-title esri-null-title">Title not available</div>') +
      "</div>";
  });
 
  document.getElementById("itemGallery").innerHTML = htmlFragment;
  // add the event listeners
  var elements = Array.from(document.querySelectorAll(".esri-item-container"));
  elements.forEach(element => {
    element.addEventListener("click", clickHandler);
  });
}

function cleanup() {
  var elements = Array.from(document.querySelectorAll(".esri-item-container"));
  elements.forEach(element => {
    element.removeEventListener("click", clickHandler);
  });
}

function clickHandler(event) {
  // do something with clicked element
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Rather than try to use a global method, it's better to handle it like this. Using a named function for the handler lets you remove the listener as well.

Re: How to access function in require([])

PHerk — Wed, 19 Feb 2020 18:34:56 GMT

Thank you Rene! Exactly, that is what I'm trying to do. It works! Appreciated!!