Binding to nested object fails

Bug Reports
1

I’d appreicate your help to help me identify the cause of a very strange error where My UX component displays some values but fails to display other values that are nested more deeply. I have debugged my code in VSCode and have inspected variables and logged the output to console to verify that the path I specify in my UX Value binding is correct and contains a non-empty string value, but yet nothing displays. I am 99.99% sure the text elements are not hiddent or off screen as well.

First here, is my environment info:
Fuse version 0.28.0 (build 8142)
Copyright © 2016 Fusetools
OSX El Capitan 10.11.6

Here is my code snippet.

<Each Items="{searchResults}">
   <DetailedItem />
</Each>

<StackPanel ux:Class="DetailedItem" Margin="0,14,0,10">
    <Panel ux:Class="VerticalBar" Margin="8,0,8,2" Alignment="VerticalCenter">
        <Rectangle Height="12" Width="2" Fill="#dcdee3" />
    </Panel>
    <Panel ux:Class="HorizontalBar" Margin="46,10,0,10" Alignment="VerticalCenter">
        <Rectangle Height="1" Fill="#dcdee3" />
    </Panel>

    <!-- Text -->
    <Text ux:Class="SubText" Alignment="Left" FontSize="9" Color="Black" />
    <Text ux:Class="Header" TextWrapping="Wrap" FontSize="12">
        <Font File="../../assets/fonts/AlegreyaSans-Bold.otf" />
    </Text>
    <Text ux:Class="Article" Margin="14,0,14,0" TextWrapping="Wrap" FontSize="9">
        <Font File="../../assets/fonts/Lato-Regular.ttf" />
    </Text>
    <Text ux:Class="Name" FontSize="10">
        <Font File="../../assets/fonts/Roboto-Bold.ttf" />
    </Text>
    <Text ux:Class="Priceline" FontSize="10" Color="Red">
        <Font File="../../assets/fonts/Roboto-Bold.ttf" />
    </Text>
    <Text ux:Class="OffersAvailable" Alignment="Left" FontSize="9" Color="Black" />

    <!-- The header -->
    <DockPanel Margin="10,0,0,2">
        <Image Url="{image.url}" Dock="Left"/>
        <StackPanel Orientation="Vertical">
            <Header Value="{title}" />
            <SubText Value="{byLine}" />
            <Priceline Value="{prices.buy.price}" />
            <StackPanel Orientation="Horizontal">
                <OffersAvailable Value="{prices.sale.tier[0].text}" />
                <Priceline Value="{prices.sale.tier[1].text}" />
            </StackPanel>
        </StackPanel>
    </DockPanel>
    <HorizontalBar />
</StackPanel>

The bug I am observing is that the first custom Text fields display but yet the latter two more nested attributes are not visible despite having non-empty string values.
Questions:

  1. What am I doing wrong and how can I get it the two missing attributes to display?
  2. Is there a limit to how far Fuse can extract values in a UX value binding?
  3. Is it possible to do inline Javascript code evaluations within UX bindings (like React or ReactNative) such as using the Javascript ternary operator to avoid failures when an attribute is equivalent to undefined? I am thinking of scenarios where one might do this:
<Priceline Value="{prices.sale && prices.sale.tier[1] ? prices.sale.tier[1].text : ''}" />
  1. If we can’t do inline Javascript code evaluations, how do we conditionally display UX elements based on a value. For instance, how would we handle the requirement of dealing with anonymous versus registered users that would conditionally see a “Sign Up” button versus a Sign On button?
2

Hi!

There is no limit to how deep in a nested object you can reach, but you can’t directly index into arrays inline in UX like you do here

<OffersAvailable Value="{prices.sale.tier[0].text}" />

There is no ternary operator just yet, but with the latest release (fuse 0.31) we released an experimental feature called “UX expressions” which probably will support something like that (it is still being actively developed).
https://www.fusetools.com/docs/ux-markup/expressions

I would suggest you export a curated object with exactly the fields you need instead of binding deep into a nested object structure. Not only does this make your UX cleaner, but it also makes it a lot easier to make changes to your data-model and UX without breaking the other since you clearly define an interface to your data.

I hope this answers your questions :slight_smile:

3

Hi Kristian.
Very cool – I’ve downloaded version 0.31 and will be excited to try UX Expressions. I think it’s a huge feature that adds a tremendous amount of flexibility. Thank you.

As for the binding and array indexer limitation – I agree that creating a custom interface helps in simplifying the binding however, I think there are often cases where this approach comes at a cost to overall App responsiveness. The case that arises is with 3rd Party APIs that requires each and every response to be transformed. In these cases, it seems that we are taking a hit to response times, cpu and memory consumption. Should I submit a feature request to have this UX binding feature or at the very least, to throw an exception when indexing into arrays?