How to access function in require([])

633
4
Jump to solution
02-19-2020 03:53 AM
PHerk
by
New Contributor II

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.

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

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.

View solution in original post

4 Replies
Egge-JanPollé1
MVP Regular Contributor

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

0 Kudos
PHerk
by
New Contributor II

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. 

0 Kudos
ReneRubalcava
Frequent Contributor II

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.

PHerk
by
New Contributor II

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

0 Kudos