Float properties don't accept percentages via JavaScript.

Bug Reports
1 
<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
    module.exports = {
        half: Observable(&quot;50%&quot;)
    }
&lt;/JavaScript&gt;

&lt;Rectangle Width=&quot;{half}&quot; Fill=&quot;#F00&quot; Height=&quot;10&quot;/&gt;

The preview stops with with unknown char, however using <Rectangle Width="50%" /> works as expected.

2

Hi!

This is unfortunately a limitation of how Fuse works (as of 0.9.11)

You can get around it like this:

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        module.exports = {
            half: Observable(50)
        }
    </JavaScript>

    <Rectangle ux:Name="rect1" Width="0%" Fill="#F00" Height="10"/>
    <DataBinding Target="rect1.Width" Key="half" />
</App>
3

Hi,

I just implemented support for this. It will likely roll out in Fuse 0.11 :slight_smile:

<App>
    <JavaScript>
        exports.width1 = "50";
        exports.width2 = "50px";
        exports.width3 = "50%";
    </JavaScript>
    <StackPanel>
        <Panel Color="Red" Width="{width1}" Height="100" />
        <Panel Color="Green" Width="{width2}" Height="100" />
        <Panel Color="Blue" Width="{width3}" Height="100" />
    </StackPanel>
</App>

(Also works with Observables)