Scripting & Data-binding
Fuse implements the CommonJS module system, which means that we can export variables to the outside world by attaching them to the
Data-binding is then done using the curly brace syntax,
We can place a
<App> tag to create an app-global module:
Code does not need to be inline in the UX markup. We can put it in a separate file, and reference it by name. This has the samme effect:
We can also place
ux:Class. This will evaluate the module for each instance of the class, giving us component-local state and data.
The 'foo' variable now exists for each instance of MyComponent, and the data binding below
fs wouldn't be expected to work in a web page, Fuse's approach to JS is the same.
In short: you'll have greater success with Fuse (and more fun!) if you approach it as a new thing rather than a typical DOM-based JS framework. :)
The curly brace syntax binds to the closest object in the data context that matches the binding path.
We can also bind functions to events like
Callback.Handler. Bound functions are passed a parameter containing various properties. These properties also vary depending on which event the function has been bound to:
- Pointer events provide (for events like
y: Global pointer coordinates
localY: pointer coordinates relative to the component origin
eventName: Name of the event fired
label- name of the marker which has been tapped
longitude- coordinates relevant to the fired event.
name, the name of the page being navigated to.
- Image and ImageSource's
reason- The reason which caused the error
y- New coordinates of element
height- New width and height of element
value- Current scroll value, as an array containing x at  and y at 
relativePosition- The amount of change in scroll since the user started a scroll
- OnUserEvent provides custom parameters you pass in through
event.raise(). You can read more about this here.
In all cases, we additionally get a
data property, which contains the data context of the node from which the function was called. A normal use of this property, is to retrieve the data object from which the node was created, for example when using the
The following example shows how the age value can be retrieved from a clicked event happening on an item in an
Data-binding to arrays
We can data-bind to an array using the Each behavior:
The Each behavior will instantiate its children once for each item in its bound array. That item then becomes the data context for that instance which is why we can data-bind to the color value by an empty set of curly braces
Making the UI react to changes
Most of the time one wants to display dynamic data that changes over the lifetime of the app. This is simply done by storing the data in an
Observable is a core part of the Fuse reactive data-binding system, and is used everywhere in Fuse apps.
Observables act like a single value or a list of values. Any data-bound
Observable will update the view automatically when its value is changed:
We can also add more items to and
Observable by using the
The Each behavior will update itself when the contents of its data-bound Observable changes.
We can add our own functions to a component, and call them from anywhere the component is instantiated: