How To Bind/Pass data to a child UI component

How-to Discussions
1

I am trying to make reusable compoinents and move things to different files.

Basically I have a list of some EventItem objects. Now I want to pass data from the parent context, the “Each” repeater down to the EventItem.

The only way to do this was to create “Property” tags on the EventItem and explicitly bind each property.

Is there a way to bind an Object as Property?

Idealy I would like to use smth like:

<EventItem data="{}" />

and then

<Text Value="{Property self.data.title}" />

or smth along those lines, is it possible?

Example of what I am trying to do:

EventsView.ux

<Page Title="Events" ux:Class="EventsView">
    <JavaScript File="scripts/EventsView.js"/>
    <DockPanel>
        <Image File="assets/cover.jpg" Height="250" StretchMode="UniformToFill" Dock="Top" />
        <ScrollView Dock="Fill">
            <StackPanel>
                <Each Items="{events}">
                    <EventItem title="{title}" description="{description}" />
                </Each>
            </StackPanel>
        </ScrollView>
    </DockPanel>
</Page>

EventsView.js

var Event, Observable, events;

Observable = require("FuseJS/Observable");

Event = (function() {
  function Event(title, description) {
    this.title = title;
    this.description = description;
  }

  return Event;

})();

events = Observable(new Event("T1", "D1"), new Event("T2", "D2"), new Event("T3", "D3"));

module.exports = {
  events: events
};

EventItem.ux

<DockPanel ux:Class="EventItem" ux:Name="self">
    <string ux:Property="title" ux:Value="Subject" />
    <string ux:Property="description" ux:Value="description" />
    <string ux:Property="sender" ux:Value="sender" />
    <Circle Height="50" Width="50" Dock="Left" Margin="7,7,0,7" Alignment="TopLeft">
        <ImageFill Source="{DataToResource icon}" />
    </Circle>
    <StackPanel Margin="7,3,7,7">
        <Text Font="Regular" Value="{Property self.title}" FontSize="16" />
        <Text Font="Regular" Value="{Property self.sender}" FontSize="16" TextColor="#999" />
        <Text TextWrapping="Wrap" Font="Light" Value="{Property self.description}" FontSize="14" TextColor="#000" />
    </StackPanel>
</DockPanel>
2

I’m also wondering how to achieve this. Object proerties seems like something fuse needs :slight_smile: