<DirectNavigation /> not working when Pages' Names are being binded

General
1

What

I cannot use the Active property of DirectNavigation when the Pages’ names are bound. No page is visible (active). It does not seem to find the page when the name is bound - since it works if I write the name directly in UX. No errors are thrown.

UX
<!--Page controller-->
<Panel Alignment="Bottom" Height="75%" Background="#18161E">
  <!--Page animation-->
  <Style>
      <CalculatorPage ux:Name="page">
             <!--Content stripped for this example-->
      </CalculatorPage>
  </Style>

  <!--Navigation behaviour with Active bound-->
  <DirectNavigation Active="{active}" />

  <!--For all pages declared in JS-->
  <Each Items="{pages}">
      <!--ux:Name is set by a binding unique to each page-->
      <CalculatorPage ux:Name="{name}">
          <!--Content stripped for this example-->
      </CalculatorPage>
  </Each>
</Panel>
JS
//All pages
var pages = Observable();

//Current page, with default
var active = Observable("defaultPage");

//Object used in the Each loop
function Page(name, buttons){
  var self = this;

  //Here I set the name directly, since there is no need for ever changing the value. PS. It doesn't work if I use an Observable either.
  this.name = name;

  //Further code stripped

}

//Example of adding a page
pages.add(new Page("example", []));

//Example of changing the current page
active.value = "example";

//Export accessible values
module.exports = {
    pages: pages,
    active: active
};
2

We currently have some order of resolution issues with JS that we’re working to resolve. This is likely the error that the “{active}” bit is trying to resolve before the page is actually added.

It was never really intended as a use-case for navigation to have dynamic pages added via JS this way. Can you explain what you’re trying to do so that we can perhaps figure out a different way, or identify the missing features?

3

I would also like to know of a way to generate a dynamic amount of subpages using .

4

Too bad this doesn’t work anymore, at least not reliably. If you preview it a couple of times, the list of pages doesn’t show up anymore.

It was listed as one of the examples. https://www.fusetools.com/examples/pages-using-js

5

It’s uncertain whether/how this issue will be resolved. In the upcoming release we have a Navigator feature which can probably better address this situation.

6

It’s probably because you’re setting ux:Name, try just Name