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