When using a r-input component, which is very useful to allow the user to input arbitrarily precise values or strings, it always return a string, whether the r-var it was binded to is set as type Number or not.
Here is an example:
<script src="https://unpkg.com/@iooxa/article"></script>
<link rel="stylesheet" href="https://unpkg.com/@iooxa/article/dist/iooxa.css">
<r-var name="a" value="1" type="Number"></r-var>
<r-var name="b" value="10" type="Number"></r-var>
<r-var name="c" value="100" type="Number"></r-var>
<r-var name="d" value="1000" type="Number"></r-var>
<r-var name="sum" value="0" type="Number"></r-var>
<r-input bind="a"></r-input>
<r-input bind="b"></r-input>
<r-input bind="c"></r-input>
<r-input bind="d"></r-input>
Sum: <r-display :value="(a+b+c+d)"></r-display>
At first page load, the result shown is Sum: 1111.0, which is correct, because the variables were initialized as numbers. But as soon as any value is changed in any input, the result becomes a string, and hence the sum becomes a concatenation of strings eg: Sum: 1101001000.
Current workarounds include either parsing as float inside the r-display:
Sum: <r-display :value="(parseFloat(a)+parseFloat(b)+parseFloat(c)+parseFloat(d))"></r-display>
Or by parsing as float when the r-input components change the r-var values:
<r-input :value="a" :change="{a: parseFloat(value)}"></r-input>
<r-input :value="b" :change="{b: parseFloat(value)}"></r-input>
<r-input :value="c" :change="{c: parseFloat(value)}"></r-input>
<r-input :value="d" :change="{d: parseFloat(value)}"></r-input>
A simpler approach would be for r-input to check the r-var type and store as a float if set as a Number.
BTW I did this small test to see how far the reactivity goes and I'm quite impressed that the sum is automatically updated without explicitly binding a callback or a specific variable, IMHO this is amazing and allows for very highly expressive but concise setup of variables and components interactions. An example like the one I produced above could be added in the documentation to show that modifying any variable will automatically update :value aggregates (and not just bindings).
When using a
r-inputcomponent, which is very useful to allow the user to input arbitrarily precise values or strings, it always return a string, whether ther-varit was binded to is set as typeNumberor not.Here is an example:
At first page load, the result shown is
Sum: 1111.0, which is correct, because the variables were initialized as numbers. But as soon as any value is changed in any input, the result becomes a string, and hence the sum becomes a concatenation of strings eg:Sum: 1101001000.Current workarounds include either parsing as float inside the
r-display:Or by parsing as float when the
r-inputcomponents change ther-varvalues:A simpler approach would be for
r-inputto check ther-vartype and store as a float if set as aNumber.BTW I did this small test to see how far the reactivity goes and I'm quite impressed that the sum is automatically updated without explicitly binding a callback or a specific variable, IMHO this is amazing and allows for very highly expressive but concise setup of variables and components interactions. An example like the one I produced above could be added in the documentation to show that modifying any variable will automatically update
:valueaggregates (and not just bindings).