StateGroup.Active not readable

Bug Reports
1

StateGroup.Active appears to currently be a write-only property (this is not indicated by the docs).

If binding a property to it, changes to the property will update the StateGroup, but updates to the StateGroup via the ui, are not reflected back in the property.

As a result, if the active router navigates away from, and then back to the page containing the StateGroup, the property is read again and the current state reverts to the last ever set by js.

2

It’s a limitation that Node types cannot be reflected back to JavaScript. For Navigation we made the ActiveIndex property, an integere, which avoids the problem. We’d have to do the same thing for StateGroup (which shouldn’t be too hard considering internally it already has this property).

I’ll add an issue for it.

A workaround for now is to avoid updating the state from UX, doing it only via the JS variable. Whatever is triggering the state change could instead call a JS function that updates the variable. There might be some frame-sync issues here though, possibly not an issue for you.

3

Cheers

I would like to be able to update it from the UX as well.

A hack for now seems to be to assign the js property with the desired state, then assign an empty string to it immediately after. This changes the state, but allows the UX to continue to control it after, without it being changed upon re-read:

stateGroup.value = 'desiredState';
stateGroup.value = '';
4

If you don’t need to know the current state from JS then use the goto method instead. myStateGroup.goto( "stateName" ) in your code. There’s no need for a binding.

5

What’s the correct way to access the ux component directly from js? (getting a “is not defined” error)

It has a ux:Name, but this doesn’t seem sufficient. I suspect this is likely because the ux and js are in separate files.

All my navigator pages are separate includes. But as the js that drives these events requires access to several navigator pages, it is in the main ux file. I can pass properties down to these included pages, but it seems I cannot access their elements directly. Is this correct?

6

There’s no real best practice for this type of setup, but it sounds like something that UserEvent could do. The high-level component can post the event and the lower-level one listens to it an updates the state.

https://www.fusetools.com/docs/fuse/userevent

It’s also possible to communicate via JS modules, but that doesn’t sound like the best approach hear.

We have a pending feature request to make the StateGroup a part of the Router system, which might also help here. In the meantime you could isntead communicate the current state via a property on the Parameter to the page.

7

Hmm, nice cheers

UserEvents look neat. I should be using these.

You’ve given me a lot to think about, thanks