DataBoundScrollView

The DataBoundScrollView is a beast to display real-time data with built-in animations powered by famous-flex.

It allows you to pass in a PrioritisedArray and a render function, and it will automagically synchronise the UI with the models in the array in real-time. Additions, changes, moves, and removals are immediately reflected in the UI. All beautifully animated, courtesy of famous-flex.

We'll go over some of its features here.

FlexScrollView additions

Documentation of the FlexScrollView should be a good starting point for understanding the DataBoundScrollView.

Added stuff

On top of what FlexScrollView offers, the following options are provided:

dataStore: the PrioritisedArray to subscribe to.
itemTemplate: a function that receives a Model instance and returns any type of Famous renderable (including Arva Views).
groupBy: [Optional] a function that receives a Model and returns the Models group value to group the items with.
groupTemplate: [Optional] a function that receives a group value as returned by groupBy, and returns any Famous renderable
headerTemplate: [Optional] a function that returns any Famous renderable. This renderable will be shown at the top of the list, and scroll along with the content.
placeholderTemplate: [Optional] a function that returns any Famous renderable. This renderable will be shown when there are no items (left) in the PrioritsedArray.
dataFilter: [Optional] Filter what data is relevant to the view. Should be a function taking as an argument a model and from there returning a boolean.
ensureVisible: [Optional] Function with a model as an argument, returning true if a new item should be forced to be visible by scrolling to it when being added.
scrollToNewChild: [Optional] Boolean indicating whether we should automatically scroll to newly added items. Defaults to false.
orderBy: [Optional] A function specifying the order of the renderables. Takes two arguments model1, model2, and returns a boolean which is true if model1 should go before model2, and false otherwise.
throttleDelay: [Optional] a Number stating how long the delay between adding children to the DataBoundScrollView should be, in milliseconds. Default 0. Adding a delay of around 50ms causes the scrollView to load the items more naturally. No delay at all might load items at once, which may not be the look and feel you're after.

📘
Sometimes, you might need to wait for something before that an item in the DataBoundScrollView can be created. You can acheive this effect by returning a promise in the dataFilter option that resolves at any time convenient

Events

on('child_click', callback): executes callback every time a child renderable is clicked, and passes an object with keys 'renderNode' and 'dataObject' to the callback function. The renderNode is the Famous renderable, and the dataObject is the Model instance.

Example

The following example view will display a full-page scrollable view with the moods of all our monkeys:

export class DataView extends View {
    @layout.fullscreen
    scrollView = new DataBoundScrollView({
    layout: CollectionLayout,
    layoutOptions: {
        itemSize: [undefined, 30]
    },
    itemTemplate: (monkey) =>
        new Surface({content: `Mood: ${monkey.currentMood}`}),
    dataStore: new Monkeys()
    });
}