In this section, we will explore the process of displaying an array of items on the screen. Additionally, we will delve into the mechanics behind accomplishing this task.

To begin, we will examine an expression that associates with a property named items within a binding context. Each element within this collection possesses a property called code.

Setting the items property on the context

async setCollection() {
    this.setProperty("items", [
        { code: "Code 1" },
        { code: "Code 2" },
        { code: "Code 3" },
        { code: "Code 4" },
        { code: "Code 5" }
    ])
}

Displaying the items on the UI

<ul>
    <template for="item of items">
        <li>${item.code}</li>
    </template>
</ul>

When ever you change the collection on the context by using the setProperty method the collection will update according to the new collection. The new collection does not have to be the same size, if it is larger, more elements will be added and if it is smaller, some existing elements will be removed.

When you request the collection from the binding engine using getProperty, you will notice that the collection is wrapped in a proxy.
When you add new items to the proxy, those items will be added to your UI

const items = this.getProperty("items");
items.push({ code: "Code 12" });
items.push({ code: "Code 13" });

The utils module includes a DOM collection manager class, which offers user-friendly methods for manipulating collections. The available operations provided by this class are:

1. append
2. splice
3. pop
4. shift

These operations align one-to-one with the capabilities of the proxy. Consequently, when you make alterations to the proxy, these changes are synchronized with the DOM collection manager. The actual processing is performed by the DOM collection manager, which relies on the inflation manager. While this section won’t delve into the intricacies of the inflation manager, you can refer to the dedicated section for a more comprehensive understanding. It’s important to note that the inflation manager contains both the template and the inflation function, which are essential for merging data and the user interface. All new elements are generated through the inflation manager, and updates to existing items also involve the inflation manager’s functionality.

Please be aware that every push operation will result in changes to the DOM. To enhance performance, you may consider optimizing this process by avoiding individual additions, as they can potentially lead to slowdowns. Instead, it’s advisable to make a single call and provide all the items you wish to add as a batch operation.

items.push({ code: "Code 12" }, { code: "Code 13" }, { code: "Code 14" });

You also have the capability to modify properties of various items within the collection. These modifications may be linked to specific bindings, and you may expect the user interface to reflect and display these changes. However, it’s important to note that automatic updates won’t occur in this scenario. Instead, you need to be explicit about when you want the updates to take effect.

const items = this.getProperty("items");
items[0].code = "Code 1 Updated";
items[1].code = "Code 2 Updated";

await crs.binding.data.updateUI(this.bid, "items");

The code mentioned above is executed within a view base, serving as the binding context. The items property mentioned earlier is part of this binding context. As you can observe, we are implementing the necessary modifications. Once these changes are complete, we utilize the updateUI method from the binding data manager, which takes two parameters into account:

1. bid: This specifies the target for the update.
2. The property on the bid that requires updating.

The manager will then query the defined binding actions associated with that property and execute the required updates accordingly.