How to convert watchUtils whenFalse whenTrue to reactiveUtils

GregoryBologna · ‎06-02-2022

I am using 4.23. How would watchUtils whenFalse and whenTrue be converted to reactiveUtils?

watchUtils.whenFalse(item.layer, "visible", function (newVal) {
	// do stuff
});

watchUtils.whenTrue(item, "visible", function (newVal) {
	// do stuff
});

AndyGup · ‎06-02-2022

We are updating the docs for 4.24. This might help in the meantime:

// watchUtils
watchUtils.whenTrue(foo, "some.value", () => console.log("True"));
watchUtils.whenFalse(foo, "some.value", () => console.log("False"));

// Equivalent in reactiveUtils
reactiveUtils.when(() => some.value === true, () => console.log("True"));
reactiveUtils.when(() => some.value === false, () => console.log("False"))

GregoryBologna · ‎06-06-2022

I'm getting Uncaught ReferenceError ReferenceError: when is not defined

// watchUtils.whenFalse(item.layer, "visible", function (newVal) {
//  layerListFormat(item);
// });
// watchUtils.whenTrue(item, "visible", function (newVal) {
//  layerListFormat(item); // removed
// });

when(() => item.layer.visible === true, () => layerListFormat(item));
when(() => item.layer.visible === false, () => layerListFormat(item));

AndyGup · ‎06-06-2022

Oh, whoops, you have to import the module first, here's a working AMD codepen example: https://codepen.io/andygup/pen/rNJrbzM?editors=1000.

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.23/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.23/"></script>
    <script>
      require(["esri/Map",
      "esri/views/MapView",
      "esri/core/reactiveUtils"], (Map, MapView, reactiveUtils) => {
        const map = new Map({
          basemap: "topo-vector"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65] 
        });
        
        const handle = reactiveUtils.when(
          // getValue function
          () => view.updating === false,
          // Callback function
          () => {
            console.log("view update: ", view.updating);
          }
        );        
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

With ES modules the import pattern would look like this:

import { when } from "esri/core/reactiveUtils";

when(() => item.layer.visible === true, () => layerListFormat(item));
when(() => item.layer.visible === false, () => layerListFormat(item));

AndyGup · ‎06-06-2022

I also updated my previous code snippet to hopefully make the pattern more clear.

GregoryBologna · ‎06-06-2022

I included the module but missed adding it to the when. It is working. Thank you, Andy.

reactiveUtils.when(
 () => item.layer.visible === false,
 () => {
   layerListFormat(item)
 }
);

reactiveUtils.when(
 () => item.layer.visible === true,
 () => {
   layerListFormat(item)
 }
);