topic Re: How to convert watchUtils whenFalse whenTrue to reactiveUtils in ArcGIS JavaScript Maps SDK Questions

How to convert watchUtils whenFalse whenTrue to reactiveUtils

GregoryBologna — Thu, 02 Jun 2022 12:17:14 GMT

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 });

Re: How to convert watchUtils whenFalse whenTrue to reactiveUtils

AndyGup — Mon, 06 Jun 2022 14:35:45 GMT

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"))

Re: How to convert watchUtils whenFalse whenTrue to reactiveUtils

GregoryBologna — Mon, 06 Jun 2022 12:17:48 GMT

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));

Re: How to convert watchUtils whenFalse whenTrue to reactiveUtils

AndyGup — Mon, 06 Jun 2022 14:31:40 GMT

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));

Re: How to convert watchUtils whenFalse whenTrue to reactiveUtils

AndyGup — Mon, 06 Jun 2022 14:36:34 GMT

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

Re: How to convert watchUtils whenFalse whenTrue to reactiveUtils

GregoryBologna — Mon, 06 Jun 2022 19:19:00 GMT

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) } );