No PageControl navigation when using array.push

How-to Discussions
1

Hello! Long time no see, i am trying to get into Fuse again as it is a very good platform, and i enjoy using it.

I am using the new es6 hikr example as inspiration for the navigation of the app. The following is a narrowed-down reproducable example:

MainView.ux

<App Model="models/app.js">
	<ClientPanel>
		<PageControl Pages="{current.navigation.pages}">
			<A ux:Template="A" />
			<B ux:Template="B" />
		</PageControl>
	</ClientPanel>
</App>

models/app.js

import Navigation from 'scripts/Navigation';

export let current = {
	navigation: new Navigation(),
};

export default class App {
	constructor() {
		this.current = current;
	}
}

scripts/Navigation.js

import A from 'pages/a';

export default class Navigation {
	constructor() {
		this.pages = [new A()];
	}
	navigate(page) {
		this.pages.push(page);
	}
}

pages/a.ux

<Page ux:Class="A" Color="#F5000C">
	<StackPanel>
		<Text Value="Hello"> </Text>
		<Panel Height="100" Color="#0000FF" Clicked="{goToB}">
			<Text Alignment="Center" Value="to B" />
		</Panel>
	</StackPanel>
</Page>

pages/a.js

import B from 'pages/b';
import { current } from "../models/app";

export default class A {
	constructor() {
		
	}
	goToB() {
		console.log("Go to b");
		current.navigation.navigate(new B());
		console.dir(current.navigation.pages);
	}
}

When the Go to b button is clicked, the string Go to b is logged to the output, and console.dir proves that the array is increasing in length. Still, no navigation happens.

If i change navigation.js like this:

	navigate(page) {
		this.pages = [page];
	}

It works. However, it only works if page is the only entry in the new array.

What is happening here?

Using the newest Fuse release

2

The issue ended up being using a PageControl instead of Navigation in MainView.ux