# Reference an Element or a Control for access in JS

**URL:** <https://forums.fusetools.com/t/reference-an-element-or-a-control-for-access-in-js/3031>\
**Category:** Feature Suggestions\
**Created:** [January 3, 2016, 3:59pm UTC](https://forums.fusetools.com/t/reference-an-element-or-a-control-for-access-in-js/3031 "2016-01-03T15:59:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlexGustafsson](https://avatars.discourse-cdn.com/v4/letter/a/7feea3/32.png) [@AlexGustafsson](https://forums.fusetools.com/u/AlexGustafsson)\
**Post date:** [January 3, 2016, 3:59pm UTC](https://forums.fusetools.com/t/reference-an-element-or-a-control-for-access-in-js/3031/1 "2016-01-03T15:59:53Z")

</div>

### 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

```auto
/.../

var navigator = Observable();

module.exports = {
    navigator: navigator
};

/.../

```

```auto
<!--...-->

<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

```auto
/.../

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

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 4, 2016, 1:47am UTC](https://forums.fusetools.com/t/reference-an-element-or-a-control-for-access-in-js/3031/2 "2016-01-04T01:47:02Z")

</div>

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 🙂

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!

---

<div class="post-metadata">

**Author:** ![Kelvin\_Louis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kelvin_louis/32/106_2.png) [@Kelvin\_Louis](https://forums.fusetools.com/u/Kelvin_Louis)\
**Post date:** [May 13, 2016, 10:31pm UTC](https://forums.fusetools.com/t/reference-an-element-or-a-control-for-access-in-js/3031/3 "2016-05-13T22:31:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [May 14, 2016, 5:01am UTC](https://forums.fusetools.com/t/reference-an-element-or-a-control-for-access-in-js/3031/4 "2016-05-14T05:01:41Z")

</div>

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.