Each Class

Displays a collection of objects using the given template(s) for each item.

The children of an Each tag represent a template that will be "projected" for each item in the collection specified by the Items property. The projected item then becomes the data context for that instance, so data-binding can be specified relative to the item itself rather than having to index the collection explicitly.

Note that each subtree projected by Each lives in its own scope. This means that the children of an Each cannot be accessed from outside it. You can, however, access nodes declared outside the Each from the inside.

Example

<JavaScript>
    module.exports = {
        items: [
            { name: "Jake", age: 24 },
            { name: "Julie", age: 25 },
            { name: "Jerard", age: 26 }
        ]
    };
</JavaScript>
<StackPanel>
    <Each Items="{items}">
        <StackPanel>
            <Text Value="{name}" />
            <Text Value="{age}" />
        </StackPanel>
    </Each>
</StackPanel>

Using Each with ux:Template

If you are using Each in a custom made component, you can increase the cusomizability of that component by allowing it to take in custom template objects which it can use instead of the default template the Each is using. To do this, you need to do two things:

  • Give the TemplateSource property an element that can recieve templates (in the case of custom made components, that would be your custom component's class)
  • Specify the template name Each will be looking for, using the property TemplateKey

If a template isn't specified, the child element of Each will be used as a de-facto template.

Example

The following example demonstrates passing custom templates into a class for an Each to use:

<StackPanel ux:Class="CoolRepeater" Background="#FAD">
    <Each TemplateSource="this" TemplateKey="Item" Count="20">
        <Text>No template is given</Text>
    </Each>
</StackPanel>
<CoolRepeater>
    <Text ux:Template="Item">Hello, world!</Text>
</CoolRepeater>

Notice that if you remove the "Hello, world!" text that is our custom template, the Each will fall back to using the child as the template.

If you want the ability to control the template on a per-item basis, the similar MatchKey-property can be used:

<JavaScript>
    var Observable = require("FuseJS/Observable");

    module.exports.posts = Observable(
        {postType: "text", body: "Lorem ipsum", title: "Hello, world"},
        {postType: "quote", quote: "Stuff", title: "A quote"}
    );
</JavaScript>

<ScrollView>
    <StackPanel>
        <Each Items="{posts}" MatchKey="postType">
            <StackPanel ux:Template="text" Height="100" Color="#FFF" Margin="10" Padding="10">
                <Shadow Distance="3" />
                <Text FontSize="25" Value="{title}" />
                <Text FontSize="15" Value="{body}" TextWrapping="Wrap" />
            </StackPanel>
            <DockPanel ux:Template="quote" Height="200" Color="#FFF" Margin="10" Padding="10">
                <Shadow Distance="3" />
                <Text FontSize="25" Value="{title}" Dock="Top" />
                <Text FontSize="50" Value="”" Dock="Left" />
                <Text FontSize="15" Margin="10" Value="{quote}" />
            </DockPanel>
        </Each>
    </StackPanel>
</ScrollView>

MatchKey works by looking for a property in the data context of each item from Items. The value of this property is then used to determine the template to use for the current item. In the above example, we store the template we want to use in the property postType, which will appear in the data context of each item being iterated.

Location

Namespace
Fuse.Reactive
Package
Fuse.Reactive.Bindings 2.9.1
Show Uno properties and methods

Interface of Each

Count : int ux

The number of items to create. If Items is set, this property is ignored.

Items : object ux

A collection containing the data items used to populate the parent.

SetMatchKey(Visual, string) uno

Shorthand for setting the MatchKey property on the implicit Each created when using the Items attached property.

Inherited from Instantiator

IdentityKey : string ux

If specified will reuse existing items if a new item is created that has the same id.

MatchKey : string ux

Name of the field on each data object which selects templates for the data objects.

TemplateKey : string ux

Specifies a template key that is used to look up in the TemplateSource to find an override of the default Templates provided in this object.

Inherited from Node

ContextParent : Node uno

The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.

FindNodeByName(Selector, Predicate<Node> (Node)) : Node uno

Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.

IsRootingStarted : bool uno

Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.

Name : Selector ux

Run-time name of the node. This property is automatically set using the ux:Name attribute.

OnRooted uno

If you override OnRooted you must call base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.

Inherited from PropertyObject

Inherited from object

Attached UX Attributes

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.

Implemented Interfaces

ISubtreeDataProvider uno

When implemented by a Node, it indicates that the node provides data for its children. hide

IScriptObject uno

Interface for objects that can have a script engine representation