This article explains AtomRepeater repeater control in detail and highlights a way to bind the data to this control.

What is AtomRepeater control?

Without initially understanding what event bubbling & event capturing in javascript is, it may be challenging to understand this control. Event bubbling means whenever an event occurs on an element, like button, p, span, div, or any other HTML element, the event handler will initially run on it and then on its parent and finally up to its other predecessors. For more information about event bubbling and event capturing, please go through this article.

WebAtoms AtomRepeater control is the class component that extends from AtomControl.(AtomControl class represents UI Component for a web browser.) AtomRepeater is a data Bind Control, which works as container control. This control displays a repeated list of items bound to this control. A database table, array of objects, or any other list can be attached to this control.

The WebAtoms AtomRepeater control provides a wide range of properties and events.

What are the properties of AtomRepeater control?

allowMultipleSelection- Using this property we can enable or disable the multiple selection functionality.

items - This control returns items displayed in this control.

selectedItems - To retrieve a collection containing all selected items in a multiple-selection AtomRepeater, use the SelectedItems property.

valuePath -This property specifies the path to the property that determines the value of the selectedItem property.

enableDragDrop - When you want to grab an object and drag it to a different location, set this property to true.

itemRenderer - The itemRenderer property is like an HTML template that decorates and binds the item.

All of the above properties are bindable properties.

What is the default event of AtomRepeater?

event-item-click - This event fires action when the AtomRepeater control is clicked.

event-item-select - This is helpful when we have a requirement to execute any event on the selection of any particular item in the list e.g. trigger an event on the selection of a particular checkbox and so on.

event-item-deselect - This is helpful when we have a requirement to execute any event on deselection of any particular item in the list e.g. trigger an event on de-selection of a particular checkbox and so on.

How to implement AtomRepeater?

<AtomRepeater
    items={Bind.oneWay(() => this.viewModel.agencyLocations)}
    itemRenderer={(item: IAgencyLocation) =>
    <Row>
      <span text={item.location} style-width="75%" />
        <FAButton
            icon="fad fa-trash-can fa-lg red"
            text="Delete"/>
     </Row> } />

In the above code, We have to bind the items property, which will be collections or arrays. The itemRenderer property renders the array item.

How to create an event on an element?

Let's take the above example, where we showed a list of locations. Now we will add the delete function to remove the particular item from the list of locations items. We have to add the data client event attribute to the button.

How to add the data-click-event?

<FAButton
     data-click-event="delete-location"
     icon="fad fa-trash-can fa-lg red"
     text="Delete" />

The data-click-event attribute is not attached to the button. delete-location is the value of that data attribute. Now you are thinking, what is the use of this data attribute to the button element? How does this help us to remove the specific location? You are thinking that without calling any HTTP DELETE request will it remove a location item from the list?

We will answer all your questions with an explanation.

The data-* attribute helps us store custom data private to the page or application. This data*-attribute gives us the power to embed custom data attributes on all HTML elements. Here we are embedding the delete-location as the value of this data attribute.

Confusing?

<AtomRepeater
    items={Bind.oneWay(() => this.viewModel.agencyLocations)}
    event-delete-location={(e: CustomEvent<IAgencyLocation>) =>
              this.viewModel.deleteAgencyLocation(e.detail)}
    itemRenderer={(item: IAgencyLocation) =>
     <Row>
        <span text={item.location} style-width="75%" />
           <FAButton
               data-click-event="delete-location"
               icon="fad fa-trash-can fa-lg red"
               text="Delete" />
     </Row>}
    />

Notice the event-delete-location attribute of AtomRepeater. We have added the data-click-event attribute to the button. And we are using the custom value of this attribute to create the event for the repeater control.

This will helps to bind the event to the AtomRepeater to remove the location. But how does the location get removed? Whenever the button gets clicked, this event-delete-location event gets triggered. It will send the delete request to the server to remove the specific record from the list of items.

What are the advantages of this control?

• The first advantage of this control is that we are not binding the location name using the binding. one-way, two-way & one-time binding will not work inside the itemRenderer. There are no binding functions attached to this HTML tag.
• The second advantage of this control is that we are not binding any event to the button, which again helps us load the all-button element quickly in the browser.
• Here we have a single event to the control for a specific operation. (like here is the delete location).
• This control is straightforward to implement and loads the data faster and smoother.

The most important benefit of this control is that we have created only one event at the root level. This will reduce the event listener count in the performance monitor. [](add link here)

Check the JavaScript event listeners count. It indicates that there is a significantly less number of event listeners used in the entire application. See the event listeners count of popular social media (Twitter) web applications.

Less event listening leads to less memory usage.

Event rewriting is possible because of the event bubbling of HTML.