HTML5 Data Bindings Manual

Advanced: Using Nested Repeat Regions and Repeat Regions Inside Detail Regions

In this tutorial we will show you how to use nested Repeat Regions and Repeat Regions inside Detail Regions

*You can also check out the video.

How to do it

1. We have a repeat region on our page (1). It contains an image and text bindings that show general properties for each feed entry. In our main repeating element (2) there is a nested repeating element that contains different color values for each feed entry.

2. In our tutorial the optional elements are the different colors available for each of the motorcycles listed on the page.

3. Select the main list element <ul> (1), choose the repeating element inside the main repeating element (2), select repeat children (3) and click insert (4).

4. Now we are going to bind the color attribute to the <li> list element.  Select the dummy text (1), browse the optional attribute under the repeating region (2) and click insert (3).

5. Click Live View button in order to preview the results. You can see that the main properties are the same for each motorcycle: Image, Model, Price, Type, Engine and Fuel Economy. You can place repeat regions inside detail regions also, using the same technique.