Reference an Element or a Control for access in JS

Feature Suggestions
1

What

The ability to bind the reference of an element to an Observable (or similar). This would be accompanied by access to the Element’s or Control’s methods and functions.

Why

The ability to bind is in the current state wide spread among properties, but it’s lacking when it comes to Elements and Controls. The posibility to bind / reference a node would allow for easy access to methods like the Navigator’s GoTo function.

Examples

Binding an element

/.../

var navigator = Observable();

module.exports = {
    navigator: navigator
};

/.../


<!--...-->

<Panel>
    <HierarchicalNavigation ux:Name="navigator" ux:Ref="{navigator}" ReuseExistingNode="false" Active="homePage" />
    <Page ux:Name="mainPage" />
    <Page ux:Name="subPage1" />
       <Page ux:Name="subPage2" />
</Panel>

<!--...-->

This binds the by using ux:Ref="{observable}"

Using the referenced Element or Control

/.../

function homeClicked(args){
    //Check if the node is referenced in UX in some way
    if(navigator.referenced)
        navigator.GoTo("homePage");
}

function backClicked(args){
    //Check if the node is referenced in UX in some way
    if(navigator.referenced)
        navigator.GoBack();
}

/.../

Here we use .GoTo() and .GoBack() which are both members of the Navigator class

2

Hi,

A feature that covers your use case is actually in the works. It won’t work exactly like you are describing but I think you will find our pattern even easier to use :slight_smile:

Simply speaking all objects with ux:Name in UX will be accessible by that name as a variable in all <JavaScript> tags in the same scope. Navigators can .goto(..) etc.

Details TBA when this feature rolls out.

Thanks for your input!

3

I’m curious. Is there any update on this?

4

Indeed there is !

Fuse 0.20 is now out for pre-release testing. The new navigation features (Router/Navigator) relies heavily on this feature. To join the testing crew, see #pre-release-testing on our Slack community.