Bind javascript value to Change

How-to Discussions
1

Hi guys , i’m building a little progress bar, things was goin pretty well before decided to bind a value in change

    <JavaScript>
        var value = 200;
        module.exports = {
                    value : value
            };
    </JavaScript>
  <ClientPanel Background="Gray">
        <StackPanel>
            <Panel Height="200"/>
            <Rectangle CornerRadius="4" Height="20" Width="80%" Color="Green">
                <Rectangle ux:Name="progress"  CornerRadius="4" Height="100%" Width="20%" Alignment="Left" Color="Red" />
            </Rectangle>
            <Button>
                <Clicked>
                    <Set ProgressBar.Value="true"/>
                </Clicked>
            </Button>
            <WhileTrue ux:Name="ProgressBar">
                <Change progress.Width="{value}" Easing="QuadraticIn" Duration="0.7"/>
            </WhileTrue>
        </StackPanel>
        <Panel></Panel>
  </ClientPanel>

so this is what i’m doin , i want the WhileTrue to be effective with the binded value is that possible? Doin this i’m having a issue cannot parse ‘{value}’ as ‘uno.UX.Size’ Input string was not in the correct format. Can anyone explain me how can i interact with javascript

2

WhileTrue has a Value property that you can bind to an Observable

3

Hi, Thanks for your anwser but i dont understand how you will get this running using Value={something} Don’t want the animation to be played while a case is true or not, want to bind a value to change in this WhileTrue (here the width) so the animation can be played.

If your anwser cover my need please explain in detail how can i achieve this.

Thank you

4 
<App>
    <JavaScript>
            var value = 100;
            module.exports = {
                        value : value
                };
        </JavaScript>
<ClientPanel Background="Gray">
    <StackPanel>
        <Panel Height="200" />
        <Rectangle CornerRadius="4" Height="20" Width="80%" Color="Green">
            <Rectangle ux:Name="progress" CornerRadius="4" Height="100%" Width="20%" Alignment="Left" Color="Red" />
        </Rectangle>
        <Button Text="Change">
            <Clicked>
                <Toggle Target="ProgressBar" />
            </Clicked>
        </Button>
        <WhileTrue ux:Name="ProgressBar">
            <Change Target="progress.Width" Value="{value}" Easing="QuadraticIn" Duration="0.7" />
        </WhileTrue>
    </StackPanel>
    <Panel></Panel>
</ClientPanel>

</App>

I’d suggest sticking to this way of writing Change:

<Change Target="SomeProperty" Value="SomeValue" />

Compare to:

<Change SomeProperty="SomeValue" />
5

Wooo that’s fantastic Many thanks Edwin , didnt see things like this

6

No problem