Allow accessing Dependency properties from JS

Feature Suggestions
1

The following makes a button (NavButton) that allows me to navigate easily back and fourth through a PageControl

<App>
	<Panel ux:Class="NavButton" Direction="Next">
		<string ux:Property="Direction" />
		<string ux:Property="Text" />
		<int ux:Property="NavIndex" />
		<PageControl ux:Dependency="Control" />
		<JavaScript>
			var Direction = this.Direction;
			var navIndex = this.NavIndex;
			module.exports = {
				navigate: function (evt) {
					console.log('Index:', navIndex.value)
					if(Direction.value === 'Next') {
						navIndex.value = navIndex.value + 1;
					} else if(Direction.value === 'Previous') {
						navIndex.value = navIndex.value - 1;
					}
				}
			}
		</JavaScript>
		<Rectangle>
			<Text Value="{Property this.Text}" Alignment="Center" />
			<Clicked Handler="{navigate}" />
		</Rectangle>
	</Panel>
	<DockPanel>
		<PageControl ux:Name="nav" Active="page1" ActiveIndex="0">
			<Page ux:Name="page1">
				<NavButton Text="Go To Page 2" Control="nav" NavIndex="{Property nav.ActiveIndex}" />
			</Page>
			<Page ux:Name="page2">
				<NavButton Text="Go To Page 3" Control="nav" NavIndex="{Property nav.ActiveIndex}" />
			</Page>
			<Page ux:Name="page3">
				<NavButton Text="Go To Page 4" Control="nav" NavIndex="{Property nav.ActiveIndex}" />
			</Page>
			<Page ux:Name="page4">
				<NavButton Text="Go Back To Page 3" Control="nav" NavIndex="{Property nav.ActiveIndex}" Direction="Previous" />
			</Page>
		</PageControl>
	</DockPanel>
</App>

This could easily be cleaned up if I could access the PageControl dependency from JS by dropping the NavIndex property and just using the Control dependency:

<App>
	<Panel ux:Class="NavButton" Direction="Next">
		<string ux:Property="Direction" />
		<string ux:Property="Text" />
		<PageControl ux:Dependency="Control" />
		<JavaScript>
			var Direction = this.Direction;
			module.exports = {
				navigate: function (evt) {
					console.log('Index:', Control.ActiveIndex)
					if(Direction.value === 'Next') {
						Control.ActiveIndex = Control.ActiveIndex + 1;
					} else if(Direction.value === 'Previous') {
						Control.ActiveIndex = Control.ActiveIndex - 1;
					}
				}
			}
		</JavaScript>
		<Rectangle>
			<Text Value="{Property this.Text}" Alignment="Center" />
			<Clicked Handler="{navigate}" />
		</Rectangle>
	</Panel>
	<DockPanel>
		<PageControl ux:Name="nav" Active="page1" ActiveIndex="0">
			<Page ux:Name="page1">
				<NavButton Text="Go To Page 2" Control="nav" />
			</Page>
			<Page ux:Name="page2">
				<NavButton Text="Go To Page 3" Control="nav" />
			</Page>
			<Page ux:Name="page3">
				<NavButton Text="Go To Page 4" Control="nav" />
			</Page>
			<Page ux:Name="page4">
				<NavButton Text="Go Back To Page 3" Control="nav" Direction="Previous" />
			</Page>
		</PageControl>
	</DockPanel>
</App>

Much cleaner code and I don’t have to create a property in the NavButton for each property I want to access from the Control dependency.

Right now I get null using the last example, I don’t know if this should be possible and a bug or if not this should be possible

2

Hmm, I think your second example should be valid. Where do you get null? In JS or a null reference exception?

3

I get the null in JS the ActiveIndex property

4

Ah! My mistake, <PageControl /> does not have a JS API. So its properties cannot be accessed directly form JS.

I did some changes in your code to get you up and running with observables:

<App>
    <Panel ux:Class="NavButton" Direction="Next">
        <string ux:Property="Direction" />
        <string ux:Property="Text" />
        <PageControl ux:Dependency="Control" />
        <JavaScript>
            var Direction = this.Direction;
            var self = this;
            module.exports = {
                direction: self.Direction,
            }
        </JavaScript>
        <Rectangle>
            <Text Value="{Property this.Text}" Alignment="Center" />
            <Clicked Handler="{navigate}" />
        </Rectangle>
    </Panel>
    <DockPanel>

    	<JavaScript>

    		var Observable = require("FuseJS/Observable");

    		var activeIndex = Observable(0);

    		var navigate = function (arg) {
    			
    			var direction = arg.data.direction.value;

    			console.log(direction);

    			if (direction == "Next"){
    				activeIndex.value = activeIndex.value + 1;
    			} else if (direction == "Previous") {
    				activeIndex.value = activeIndex.value - 1;
    			}

    		};

    		module.exports = {
    			activeIndex:activeIndex,
    			navigate:navigate,
    		}
    	</JavaScript>

        <PageControl ux:Name="nav" ActiveIndex="{activeIndex}">
            <Page ux:Name="page1">
                <NavButton Text="Go To Page 2" Control="nav" />
            </Page>
            <Page ux:Name="page2">
                <NavButton Text="Go To Page 3" Control="nav" />
            </Page>
            <Page ux:Name="page3">
                <NavButton Text="Go To Page 4" Control="nav" />
            </Page>
            <Page ux:Name="page4">
                <NavButton Text="Go Back To Page 3" Control="nav" Direction="Previous" />
            </Page>
        </PageControl>
    </DockPanel>
</App>