How to access function in require([])

PHerk

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.

RRubalcava

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.

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">createGallery</SPAN><SPAN class="punctuation token">(</SPAN>items<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="comment token">// be sure to clean up any handlers</SPAN>
  <SPAN class="token function">cleanup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> htmlFragment <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>

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

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">cleanup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">var</SPAN> elements <SPAN class="operator token">=</SPAN> Array<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">from</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".esri-item-container"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  elements<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>element <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
    element<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> clickHandler<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">clickHandler</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="comment token">// do something with clicked element</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.