Activated="{jsActivated}" not working or my stupid bug?

Bug Reports
1

I’m getting “{jsActivated} not found in data context” in the Problems log.

‘value10’ is correctly exported and the value is visible.

Any idea why jsActivated isn’t found or being called?

file
Y9ows42SLPGq-image-1502187759157.22.00.png1192×364

Here is the UX markup:

<Page ux:Class="AccountCreatePage" Activated="{sActivated}">
	<Router ux:Dependency="router" />
	<JavaScript>
		module.exports = {
			jsActivated: function() {
				debug_log("jsActivated");
			},
			value10: 10
		};
	</JavaScript>
	<Text Value="I'm getting \{jsActivated\} not found in data context {value10}" />
</Page>

Fuse version 1.1.0 (build 13808)

OS X 10.3.3

2

It’s about data contexts. The Activated call on your ux:Class is looking for the callback up the tree, and can’t find it - all because it’s actually only available within the class. Check the following example for an explanation of how that works, and how you can work around it:

<App>
	<JavaScript>
	module.exports = {
		parentActivated: function() {
			console.log("called parent activated");
		}
	};
	</JavaScript>
	<PageControl>
		<Page Color="#18f" Activated="{parentActivated}">
			<JavaScript>
			module.exports = {
				blueActivated: function() {
					console.log("called blue activated");
				}
			};
			</JavaScript>
			<Activated Handler="{blueActivated}" />
		</Page>
		<Page Color="#f81" Activated="{parentActivated}">
			<JavaScript>
			module.exports = {
				orangeActivated: function() {
					console.log("called orange activated");
				}
			};
			</JavaScript>
			<Activated Handler="{orangeActivated}" />
		</Page>
	</PageControl>
</App>
3

Thank you Uldis.

I added this and it works: <Activated Handler="{jsActivated}" />

I’m interpreting your reply like this: because the attribute is on the Page tag, the data context is THE PARENT’S data context, right?

4

Yes, that interpretation is correct.

This allows you to put callbacks in the data context that you need them in - in your case, nesting Activated inside of the page allows you to access the child data context. As shown in my example, you can [optionally] trigger callbacks in both parent and child data contexts at the same time.

5

Actually, let me expand on that interpretation a little :slight_smile:

<Page ux:Class="SomePage" /> is a template. As such, it does not really have a run-time data context at all. It is the point where you use it where it gets the data context:

<PageControl>
    <SomePage />
</PageControl>

Now we have a SomePage instance that was spawned from that template definition, and its data context is where that instance resides in the UX tree. So in this regard, these two are the same, and they require the someCallbackInParent callback to be available in the parent data context:

<Page ux:Class="SomePage" Activated="{someCallbackInParent}" />
...
<PageControl>
    <SomePage Activated="{someCallbackInParent}" />
</PageControl>

There is, of course, an implicit data context inside of the ux:Class, which allows you to do things like this:

<Page ux:Class="SomePage">
	<JavaScript>
	module.exports = {
		someCallbackInChild: function() {
			console.log("ohai");
		}
	};
	</JavaScript>
	<Activated Handler="{someCallbackInChild}" />
</Page>

And that callback will fire for every instance of the ux:Class:

<PageControl>
    <SomePage />
    <SomePage />
    <SomePage />
</PageControl>

Hope this helps!